我在圆圈内有一个六边形。
请参阅初始方案:https://jsfiddle.net/njzwfvpf/
现在我想在圆圈内添加一个旋转六边形360度的动画
这是使用css动画(fiddle here)的现有方案:
.rotate {
-webkit-animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate;
animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
@-webkit-keyframes rotating {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<svg width="350" height="350">
<svg width="350" height="350">
<circle cx="230.00591443779982" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
<circle cx="100" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
<circle cx="180.41237113402062" cy="155.55555555555554" r="50" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
<circle cx="165.0943396226415" cy="120.27491408934708" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
<circle cx="165.0943396226415" cy="200" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
<svg viewBox="0 0 600 720" width="295" height="205">
<g transform="translate(239, 370)" class="rotate">
<path></path>
<path d="M 175 0 L 326.55444566227675 87.50000000000001 L 326.55444566227675 262.5 L 175 350 L 23.445554337723223 262.5 L 23.44555433772325 87.49999999999999" style="opacity: 0.4; fill: black;"></path>
</g>
<svg viewBox="0 0 600 720" width="507.4" height="799.5">
<g transform="translate(105, 395)">
<path d="M 175 0 L 341.43489035165186 120.9220259843842 L 277.8624191511828 316.57797401561584 L 72.13758084881722 316.57797401561584 L 8.565109648348141 120.92202598438415" style="opacity: 0.4; fill: black;"></path>
</g>
</svg>
</svg>
</svg>
</svg>
问题在于,添加Hexagon更改其位置的动画,它不在圈内了。
我做错了什么?我该如何解决?
答案 0 :(得分:2)
您面临的问题是,您正在使用 CSS (rotate(360deg)
)应用转换,而您已经对SVG中的同一元素进行了转换(translate(239, 370)
)。您可以通过两种方法解决这个问题:
以下是使用第二种方法解决问题的示例:
.rotate {
-webkit-animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate;
animation: rotating 3s cubic-bezier(0, 0, 1, 1) infinite alternate;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
@-webkit-keyframes rotating {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<svg width="350" height="350">
<svg width="350" height="350">
<circle cx="230.00591443779982" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
<circle cx="100" cy="155.55555555555554" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
<circle cx="180.41237113402062" cy="155.55555555555554" r="50" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
<circle cx="165.0943396226415" cy="120.27491408934708" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
<circle cx="165.0943396226415" cy="200" r="45" style="stroke: rgb(158, 157, 158); stroke-width: 1; fill: none;"></circle>
<svg viewBox="0 0 600 720" width="295" height="205">
<g transform="translate(239, 370)">
<path></path>
<path class="rotate" d="M 175 0 L 326.55444566227675 87.50000000000001 L 326.55444566227675 262.5 L 175 350 L 23.445554337723223 262.5 L 23.44555433772325 87.49999999999999" style="opacity: 0.4; fill: black;"></path>
</g>
<svg viewBox="0 0 600 720" width="507.4" height="799.5">
<g transform="translate(105, 395)">
<path d="M 175 0 L 341.43489035165186 120.9220259843842 L 277.8624191511828 316.57797401561584 L 72.13758084881722 316.57797401561584 L 8.565109648348141 120.92202598438415" style="opacity: 0.4; fill: black;"></path>
</g>
</svg>
</svg>
</svg>
</svg>