私のSVG用CSS（Transform Originに問題があります）

私は左の最初の円に2つのクラス（firstCircle &スピン）を持っていて、それを回転させようとしています。あなたは円を見ることができます）私は変換の起源について混乱しています：私のコードで何が間違っています。回転しているのではなく回転しています。私は幅と高さを加えて、変換元を試して、それを消してしまいました。私のSVG用CSS（Transform Originに問題があります）

.spin { 
position: absolute; 
top: 50%; 
left: 50%; 
width: 120px; 
height: 1120px; 
margin:-60px 0 0 -60px; 
-webkit-animation:spin 4s linear infinite; 
-moz-animation:spin 4s linear infinite; 
animation:spin 4s linear infinite; 
transform-origin: center center; 
} 
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } 
@keyframes spin { 100% { -webkit-transform: rotate(360deg); 
transform:rotate(360deg); } }

.container { padding:auto; 
 

 
width: auto; 
 
height: auto; 
 
text-align:center; } 
 

 
.line1 { 
 
stroke-dasharray: 1000; 
 
    stroke-dashoffset: 1000; 
 
    animation: dash 10s linear forwards; 
 
    animation-delay: 2.13s; 
 
} 
 
.line2 { 
 
stroke-dasharray: 1000; 
 
stroke-dashoffset: 1000; 
 
animation: dash 10s linear forwards; 
 
animation-delay: 2.5s; 
 
} 
 
.line3 { 
 
stroke-dasharray: 1000; 
 
stroke-dashoffset: 1000; 
 
animation: dash 10s linear forwards; 
 
animation-delay: 3s; 
 
} 
 
.line4 { 
 
stroke-dasharray: 1000; 
 
stroke-dashoffset: 1000; 
 
animation: dash 10s linear forwards; 
 
animation-delay: 3.4s; 
 
} 
 
.line5 { 
 
stroke-dasharray: 1000; 
 
stroke-dashoffset: 1000; 
 
animation: dash 10s linear forwards; 
 
animation-delay: 3.9s; 
 
} 
 
@keyframes dash { 
 
    from { 
 
    stroke-dashoffset: 1000; 
 
    } 
 
    to { 
 
    \t stroke-dashoffset: 0; 
 
    } 
 
} 
 

 

 
.insidefirstCircle { 
 
\t stroke-dasharray: 1000; 
 
    stroke-dashoffset: 100; 
 
\t animation: insideCircle 10s linear forwards; 
 
\t animation-delay: 1.2s; 
 
\t 
 
} 
 
@keyframes insideCircle { 
 
    from { 
 
    stroke-dashoffset: 1000; 
 
    opacity: 1; 
 
    
 
    } 
 
    to { 
 
    \t stroke-dashoffset: 0; 
 
    \t opacity: 1; 
 
    } 
 
} 
 

 
.secondCircle { 
 
\t animation: secondCircle 2s linear forwards; 
 
\t animation-delay: 2.2s; 
 
} 
 

 
@keyframes secondCircle { 
 
    from { 
 
    stroke-dashoffset: 1000; 
 
    opacity: 0; 
 
    
 
    } 
 
    to { 
 
    \t stroke-dashoffset: 0; 
 
    \t opacity: 1; 
 
    } 
 
} 
 

 
.insidesecondCircle { 
 
\t animation: insidesecondCircle 2s linear forwards; 
 
\t animation-delay: 2.2s; 
 
} 
 

 
@keyframes insidesecondCircle { 
 
    from { 
 
    stroke-dashoffset: 1000; 
 
    opacity: 0; 
 
    
 
    } 
 
    to { 
 
    \t stroke-dashoffset: 0; 
 
    \t opacity: 1; 
 
    } 
 
}

<!DOCTYPE html> 
 
<link rel="stylesheet" type="text/css" href="css/css.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="container"> 
 
<svg> 
 

 
    
 
    <path class="firstCircle spin" 
 
     transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)" 
 
     d="m -28.957516,-109.01346 a 20.505369,19.487934 0 0 1 25.9801488,5.74848 20.505369,19.487934 0 0 1 -1.9792854,25.281519 20.505369,19.487934 0 0 1 -26.5892124,2.031123 20.505369,19.487934 0 0 1 -6.202719,-24.656512" 
 
     id="path7158" 
 
     style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" /> 
 
    <path class="insidefirstCircle" 
 
     transform="matrix(-0.22033261,-0.9754248,-0.97735568,0.21160309,0,0)" 
 
     d="m -102.55362,-32.142649 a 7.185163,7.442451 0 0 1 5.829705,7.489633 7.185163,7.442451 0 0 1 -6.173275,7.188196 7.185163,7.442451 0 0 1 -7.86062,-5.124812" 
 
     id="path7160" 
 
     style="opacity:0;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35700712;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" /> 
 
    <ellipse class="secondCircle" 
 
     ry="5.8064542" 
 
     rx="5.806459" 
 
     transform="rotate(-9.0228844)" 
 
     cy="102.10918" 
 
     cx="31.181959" 
 
     id="path7162" 
 
     style="opacity:0;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.38561434;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" /> 
 

 
     <circle class="insidesecondCircle" 
 
     r="2.081239" 
 
     style="opacity:0;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:2.138;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" 
 
     id="circle7192" 
 
     cx="46.80978" 
 
     cy="95.955421" /> 
 
    <circle class="line1"  
 
     r="8.1839027" 
 
     cy="124.84148" 
 
     cx="88.252518" 
 
     id="path7166" 
 
     style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.63219434;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" /> 
 
    <circle 
 
     style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:3.454;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" 
 
     id="circle7168" 
 
     cx="88.252518" 
 
     cy="124.84148" 
 
     r="4.5812778" /> 
 
    <circle 
 
     r="6.7396846" 
 
     style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.52063066;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" 
 
     id="circle7174" 
 
     cx="128.74611" 
 
     cy="90.168755" /> 
 
    <path 
 
     style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" 
 
     id="path7186" 
 
     d="m -180.38976,-169.87182 a 20.505369,19.487934 0 0 1 27.64196,8.28339 20.505369,19.487934 0 0 1 -8.68637,26.27924 20.505369,19.487934 0 0 1 -27.66048,-8.22736 20.505369,19.487934 0 0 1 8.62739,-26.29677" 
 
     transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)" /> 
 
    <ellipse 
 
     style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" 
 
     id="ellipse7190" 
 
     cx="152.20651" 
 
     cy="155.0309" 
 
     transform="matrix(0.98886074,-0.14884364,0.16522023,0.9862567,0,0)" 
 
     rx="5.5144606" 
 
     ry="5.2409396" /> 
 
    
 
    <circle 
 
     cy="90.168755" 
 
     cx="128.74611" 
 
     id="circle7196" 
 
     style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:2.13800001;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" 
 
     r="2.081239" /> 
 
    <path class="line1" 
 
     id="path875" 
 
     d="m 19.085467,74.174836 c 22.366283,17.178223 22.335724,17.75844 22.335724,17.75844" 
 
     style="fill:none;stroke:#4fae7d;stroke-width:0.28233331px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> 
 
     <path class="line2" 
 
     style="fill:none;stroke:#4fae7d;stroke-width:0.36648375px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" 
 
     d="m 51.183439,99.59881 c 29.032633,22.29825 28.992966,23.0514 28.992966,23.0514" 
 
     id="path885" /> 
 
    <path class="line3" 
 
     id="path879" 
 
     d="M 95.534634,121.46865 C 123.9702,95.423153 123.73736,94.872744 123.73736,94.872744" 
 
     style="fill:none;stroke:#4fae7d;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> 
 
    <path class="line4" 
 
     id="path881" 
 
     d="m 134.621,93.468564 c 37.14699,33.672096 37.14699,33.672096 37.14699,33.672096" 
 
     style="fill:none;stroke:#4fae7d;stroke-width:0.26971px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> 
 
    <path class="line5" 
 
     id="path883" 
 
     d="m 181.40295,129.52127 c 31.40453,-10.83262 31.9066,-11.93052 31.9066,-11.93052" 
 
     style="fill:none;stroke:#4fae7d;stroke-width:0.37912115px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> 
 
    
 
    </g> 
 
</svg> 
 
</div> 
 
</body> 
 
</html>

出典

2017-12-03 Jeron Gunn

https://jsfiddle.net/osvnnmtk/ –

ここにはCSSと変換元がありません。 –

SVG 1.1には、それがサポートする限られたCSSスタイルのセットがあります。 SVG2はセットを拡張しますが、現在のブラウザではSVG2のサポートが限られています。通常、SVG内でアニメーションを作成するには、JavaScript（スナップなど）を使用する必要があります。 –

まず、あなたがあなたの.spinとfirstCircleの定義を持っているCSSのほとんどのプロパティは無効です。 position,top,'left、およびmarginはすべてHTML専用のプロパティです。 widthとheightは、<path>要素では無効です。

SVGはHTMLとは全く異なる標準であり、動作が異なることを覚えておくことが重要です。

第2に、パスには既にtransformが含まれています。 CSS変換は追加しないので、あなたのアニメーション内のtransformはあなたの<path>のものを上書きします。

この問題を解決する最も簡単な方法は、（a）SVGエディターに変換をパス座標に乗じることです。または、（b）パスの周りにネストしたグループ<g>要素を使用して回避する。変換の1つがそれに適用され、もう1つがパスに適用されます。

<g transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)"> 
    <path class="firstCircle spin" 
     d="..." /> 
</g>

変換-起源

を今すぐそれらの問題が解決されることを、我々はセンター・オブ・回転の問題に対処することができます。

transform-originとのブラウザの互換性に問題があります。 Chromeには、仕様に関して古くなった実装があります。これは修正されつつありますが、現時点では、回避策はパーセンテージ値の代わりに常に絶対座標を使用することです。

あなたの円の中心は(-19.5, -91.7)であるので、使用する正しいtransform-originです：だから

transform-origin: -19.5px -91.7px;

我々は実施例にこれを差し込む場合：

.spin { 
 
    transform-origin: -19.5px -91.7px; 
 
    animation:spin 4s linear infinite; 
 
} 
 
@keyframes spin { 
 
    100% { transform:rotate(360deg); } 
 
}

<svg> 
 

 
    <g transform="matrix(-0.98886073,0.14884376,-0.16522036,-0.98625668,0,0)"> 
 
    <path class="firstCircle spin" 
 
      d="m -28.957516,-109.01346 a 20.505369,19.487934 0 0 1 25.9801488,5.74848 20.505369,19.487934 0 0 1 -1.9792854,25.281519 20.505369,19.487934 0 0 1 -26.5892124,2.031123 20.505369,19.487934 0 0 1 -6.202719,-24.656512" 
 
      style="opacity:1;fill:none;fill-opacity:0.94117647;stroke:#4fae7d;stroke-width:0.35702455;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1" /> 
 
    </g> 
 
    
 
</svg>

出典

2017-12-04 05:11:32

私のSVG用CSS（Transform Originに問題があります）

答えて

関連する問題