はてなブックマーク

プロパティ発見。 こんにちは、「ふ」です。 SVG要素のtransform-origin（変形の基準点）を指定するには、これまで散々な苦労をしてきました。 例えば⬆︎のオブジェクトをその場で回転させようとしたとき。 #element { animation:rotate_1 3s linear infinite; } @keyframes rotate_1 ｛ to { bbtransform:rotate(1turn); } ｝ オブジェクトはその場では回転してくれません。 SVGのtransformは、その対象が「viewBoxの持つ座標空間」にあるからです。基準点は原点にあり、多くの場合その場所は画像左上になっています。 座標空間が変形した結果、それにともなってオブジェクトも、変形するという順序です。 個別のオブジェクトを思い通りの位置で変形させるには、座標値を検出し、viewBox