Wie kann ich nur die Grenze dieses SVG drehen und die Mitte festhalten?

Ich möchte ein SVG reparieren. Ich möchte nur die ID # gepunktete Linie drehen, aber halten Sie die g id = "Panda" in der Mitte fixiert. Im Moment rotiert das gesamte SVG mit der Geschwindigkeit und Glätte, die ich möchte, aber die Mitte bewegt sich auch.Wie kann ich nur die Grenze dieses SVG drehen und die Mitte festhalten?

Klicken Sie auf "Code-Snippet ausführen" und bewegen Sie den Mauszeiger über das Symbol, um die Animation zu sehen.

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>

Quelle

2017-08-07 PandaNinja

ich die Ellipse bewegt habe oben zu sein und verändert sie alle auf Zeiger-Veranstaltungen.
Ich habe die Ellipse in einem <g> Element so gewickelt, dass die Ellipse am lokalen Ursprung ist. Das vermeidet Chroms Transform-Ursprungs-Bug.
Ich habe die CSS-Animation auf die Ellipse und nicht das gesamte SVG ausgerichtet, so dass nur es rotiert.

svg { 
 
\t width: 40%; 
 
\t display: block; 
 
\t margin: 0 auto; 
 
} 
 

 
ellipse { 
 
    pointer-events: all; 
 
} 
 
\t ellipse: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> 
 
    <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> 
 
    <g transform="translate(54.3091,53.7653)"> 
 
    <ellipse id="dotted-line" rx="53.8091" ry="53.2652" style="fill: none;stroke: #2717ff;stroke-dasharray: 4.018310070037842,4.018310070037842"/> 
 
</g> 
 
</svg>

Quelle

2017-08-07 14:52:53

Vielen Dank für die Antwort und für Ihre Hilfe. Dein Code funktioniert in Chrome wunderbar, aber warum funktioniert es nicht in IE? Ist es der Server in meinem Job, der die Dinge blockiert? – PandaNinja

IE unterstützt keine CSS-Animation von SVG-Elementen. https://stackoverflow.com/questions/33812303/svg-animation-is-not-working-on-ie-11 –

Weil Sie das Wurzelelement animierten, das ein ersetztes Element ist und Art von zählt als HTML. Sie können im IE keine einzelnen Teile implementieren. –

belebte #dotted-line und stellen Sie die transform-origin
Änderung fill:none-fill-opacity:0 auf der Ellipse. Andernfalls startet die Animation erst, wenn Sie den Mauszeiger über die gepunktete Linie bewegen.

svg { 
 
\t width: 40%; 
 
\t display: block; 
 
\t margin: 0 auto; 
 
} 
 

 
\t #dotted-line:hover { 
 
\t   transform-origin: 50% 50%; 
 
\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-opacity:0;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>

Quelle

2017-08-07 14:41:46 ccprog

die CSS-Zeiger-Ereignisse Eigenschaft verwenden, ändern Sie nicht die Füllung. –

Wie kann ich nur die Grenze dieses SVG drehen und die Mitte festhalten?

Antwort

Verwandte Themen