0
私はSVGを修正したいです。 ID＃点線を回転させたいだけですが、センターに固定されているg id = "panda"のままにしておきます。今はSVG全体が私が望むスピードと滑らかさで回転しますが、真ん中も動きます。このSVGの境界線のみを回転させ、中央を固定しておくにはどうすればよいですか？
下記の「Run Code Snippet」をクリックし、アイコンの上にマウスを置くとアニメーションが表示されます。
svg {
\t width: 40%;
\t display: block;
\t margin: 0 auto;
}
\t svg:hover {
width: 40%;
\t display: block;
\t margin: 0 auto;
\t -webkit-animation-name: rotate;
\t -webkit-animation-duration: 2s;
\t -webkit-animation-iteration-count: 1;
\t -webkit-animation-timing-function: linear;
\t -moz-animation-name: rotate;
\t -moz-animation-duration: 2s;
\t -moz-animation-iteration-count: 1;
\t -moz-animation-timing-function: linear;
\t animation-name: rotate;
\t animation-duration: 2s;
\t animation-iteration-count: 1;
\t animation-timing-function: linear;
\t }
\t @-webkit-keyframes rotate {
\t from {-webkit-transform: rotate(0deg);}
\t to {-webkit-transform: rotate(360deg);}
\t }
\t @-moz-keyframes rotate {
\t from {-moz-transform: rotate(0deg);}
\t to {-moz-transform: rotate(360deg);}
\t }
\t @keyframes rotate {
\t from {transform: rotate(0deg);}
\t to {transform: rotate(360deg);}
\t }
}<svg id="panda-circ" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 108.6182 107.5305">
<title>panda-rotate</title>
<ellipse id="dotted-line" cx="54.3091" cy="53.7653" rx="53.8091" ry="53.2652" style="fill: none;stroke: #2717ff;stroke-dasharray: 4.018310070037842,4.018310070037842"/>
<g id="panda">
<path d="M33.83,73.7l5.46-11.0852L53.0219,50.5369l17.8688-1.9853,14.394,6.4525,1.489-1.1582,4.7981-1.1582,3.3091,2.1509L98.19,52.1916l5.2943-.3308,4.3016,2.978L107.62,59.306s7.7761,6.9488,7.7761,7.1142,2.6474,5.7908,2.6474,5.7908l.6617,4.3016L124,79.16l-4.9635,9.7613-8.2723,3.971-10.2581.8271,2.1509,2.9783L94.7155,98.683,81.4794,95.87,62.6181,98.5175l-4.1362.3308S41.4405,96.0358,41.4405,95.87s-8.1072-9.7616-8.1072-10.0924S33.83,74.1965,33.83,73.7Z" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M34.6879,73.6446l9.8782-4.0771,4.6025,1.1981,2.9181,8.5791a19.851,19.851,0,0,1-.311,3.101c-.1644.0045-4.1244,5.5747-4.1244,5.5747L58.6493,98.4777l5.1005-.8018,3.3061-7.3731,1.6624-8.3209-1.6376-3.431s-5.7551-.8356-5.9191-.9966a70.2706,70.2706,0,0,0-7.92,3.7625" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M58.5861,98.6832S56.9139,91.9725,56.9139,91.8,59.65,85.09,59.8026,85.09s5.1289-3.2827,5.1289-3.2827l3.233,2.9385L67.1,91.6283l-3.1928,6.8828Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/>
<path d="M33.9952,73.7l10.2578-4.1362,5.6254,1.3236,6.9488,8.6034L52.36,82.6343l-4.1364,5.1292S59.64,98.3521,59.64,98.5175s-.9925.3308-.9925.3308L41.4405,95.705l-8.1072-9.5962Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/>
<path d="M37.47,66.0893a25.1522,25.1522,0,0,1-2.1509-1.9206,15.6168,15.6168,0,0,0,.6617-2.6588l3.971-3.693,2.6472,2.068s-2.6472,2.659-2.8128,2.659S37.8006,65.6462,37.47,66.0893Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/>
<path d="M44.0877,58.3811l.3185,11.3573,5.3988,2.638,3.217-21.84-8.297,19.5565" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M70.8645,48.7171s-20.9863,22.17-20.9863,22.3358,21.84,5.7908,21.84,5.7908Z" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M84.7885,54.7323Z" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M85.45,55.17l1.6547-1.3236,4.6324-1.1582,3.3091,1.9855-2.4818,3.8053L87.27,60.4642l-2.6472-1.82Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/>
<path d="M95.2117,54.5079s2.8126-2.3163,2.9783-2.3163,4.9635-.3308,4.9635-.3308l4.7978,3.1434-.3308,4.6327Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/>
<path d="M86.4429,66.9757" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M70.8907,48.7171l.6617,27.63,1.489,13.2361L81.6448,95.87l13.4015,2.978s7.7761-1.82,7.7761-2.1507a23.3375,23.3375,0,0,0-2.3163-2.9783s-6.7833-9.5959-6.9488-9.5959-9.2653-5.1292-9.2653-5.1292Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/>
<path d="M83.9611,51.0924" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M85.2847,55.0042,80.652,72.5419" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M107.7859,59.4714,93.5573,84.2889" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M93.7227,84.2889l8.2726-8.1072,9.5959-3.3088,3.64-6.6182" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M102.1607,75.8509l9.4305-3.1437,3.1437,6.4528-2.6472,4.1362L105.47,85.778s-3.64-3.3091-3.64-3.8053S102.3261,75.6855,102.1607,75.8509Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/>
<path d="M111.5912,72.8729l6.4528-.4965" transform="translate(-20.6909 -21.2348)" style="fill: none;stroke: #000"/>
<path d="M124,79.3254l-2.978.9927,1.3236,1.6544Z" transform="translate(-20.6909 -21.2348)" style="stroke: #000"/>
</g>
</svg>
お返事ありがとうございました。あなたのコードはChromeでうまく動作しますが、なぜIEでは動作しませんか？それは私の仕事のサーバーは物事をブロックしていますか？ – PandaNinja
IEはSVG要素のCSSアニメーションをサポートしていません。 https://stackoverflow.com/questions/33812303/svg-animation-is-not-working-on-ie11 –
置き換えられた要素であり、htmlとしてカウントされるルート要素をアニメートしていたからです。 IEで個々の作品を実装することはできません。 –