は、自身の中心の周り

Question

をCSS3を使用してSVGパスを回す私はSVGパスのセットを持って、次のようにそれらの一つは次のとおりです。

<path id="GOL" class="st0" d="M37.5,430.5l-12.4-12.4v-13.3h-4.2c-7.2,0-13.9,2.5-18.7,7.5c-4.7,4.9-7.3,11.3-7.3,18.3 
    c0,7,2.6,13.5,7.3,18.3c4.8,5,11.4,7.6,18.6,7.6l4.2,0v-13.7L36.7,430.5z M19.7,435.3l-4.9-4.9l4.9-4.9l4.9,4.9L19.7,435.3z 
    M2.4,430.5c0-8.4,5.6-15.1,13.1-16.9v3.8L2.4,430.5l13.1,13.1v3.8C8,445.6,2.4,438.9,2.4,00.5z"></path> 

私は以下のコードと回転アニメーションを作ってみる：

.stuck #GOL 
{ 
    fill: red; 
    transform: rotate(90deg); 
} 

#GOL 
{ 
    transition-property: all; 
    transition-duration: 2s; 
} 

問題は、パスが規則的ではない距離の中心を中心に回転することです。私はそれがそれ自身の中心の周りを回転したい。私はCSS3を使用する必要があります（私はsvg自身のrotate()関数を使用することはできません）。

Answer 1

CSSでtransform-originを試しましたか？

これは、セレクタの中央からの変換を開始します。

Answer 2

ネストされたトランスフォームを使用すると、transform-originとそれに関連するブラウザの問題を回避できます。

基本的な考え方は、パスの回転中心をSVGの原点（左上）に変換して回転させ、元の位置に戻すことです。ネストされたグループでこれを達成できます。

クラウンの形状の中心は約22,432です。したがって、次のようにすることができます。

<g transform="translate(22 432)"> // translate everything to the path's original position 
    <g transform="rotate(90deg)">  // rotate (around the origin) 
    <path transform="translate(-22 -432)"/> // shift path to the origin 
    </g> 
</g> 

内部（パス）から最も外側のグループへの変換を読み取ります。以下

デモ：

#GOL 
 
{ 
 
    fill: red; 
 
    transform: rotate(90deg); 
 
} 
 

 
#GOL 
 
{ 
 
    transition-property: all; 
 
    transition-duration: 2s; 
 
}

<svg width="500" height="500"> 
 

 
    <g transform="translate(22 432)"> 
 
    <g id="GOL"> 
 
     <path class="st0" d="M37.5,430.5l-12.4-12.4v-13.3h-4.2c-7.2,0-13.9,2.5-18.7,7.5c-4.7,4.9-7.3,11.3-7.3,18.3 
 
    c0,7,2.6,13.5,7.3,18.3c4.8,5,11.4,7.6,18.6,7.6l4.2,0v-13.7L36.7,430.5z M19.7,435.3l-4.9-4.9l4.9-4.9l4.9,4.9L19.7,435.3z 
 
    M2.4,430.5c0-8.4,5.6-15.1,13.1-16.9v3.8L2.4,430.5l13.1,13.1v3.8C8,445.6,2.4,438.9,2.4,00.5z" 
 
     transform="translate(-22 -432)"></path> 
 
    </g> 
 
    </g> 
 
</svg>