如何围绕同一原点旋转多个SVG重用元素? [英] How to rotate multiple SVG reused elements around same origin?
本文介绍了如何围绕同一原点旋转多个SVG重用元素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何围绕相同的原点旋转3个不规则的SVG圆?它们被编写为路径并被重用.我已将transform-origin设置为center,还缺少什么?它们应该都在相同的空间中,并在中心重叠,就像这张图片一样
How can I rotate 3 irregular SVG circles around same origin? They are written as a path and reused. I have set transform-origin to center, what else am I missing? They should all be in the same space and overlap in center like in this image
<svg width="900" height="500" viewBox="0 0 900 500">
<defs>
<path id="circle" d="m 43.467262,110.65774 c -2.81733,25.95379 9.663408,54.24201 33.479611,66.3315 12.768318,6.52194 29.493997,6.26667 40.854417,-3.07058 12.79824,-9.29014 25.48168,-19.76411 33.26937,-33.78136 4.54432,-8.49226 5.12542,-19.52979 -0.73083,-27.56368 C 142.27364,100.40343 128.56364,93.579328 115.25185,88.674523 98.350761,82.775856 78.939082,80.223234 62.116925,87.733369 52.940099,92.163321 45.975566,100.79364 43.467262,110.65774 Z" />
</defs>
<g class="group">
<use class="circle circle--1" xlink:href="#circle" />
<use class="circle circle--2" xlink:href="#circle" />
<use class="circle circle--3" xlink:href="#circle" />
</g>
</svg>
svg {
width: 900px;
path {
stroke: #333;
stroke-width: 3px;
fill: transparent;
}
}
g {
position: relative;
transform-origin: center center;
}
.circle {
transform-origin: 50% 50%;
perspective: 500px;
&--1 {
transform: rotateZ(60deg);
}
&--2 {
transform: rotateZ(120deg);
}
&--3 {
transform: rotateZ(180deg);
}
}
https://codepen.io/anon/pen/mQdLvX
推荐答案
.circle {
transform-box: fill-box;
transform-origin: 50% 50%;
perspective: 500px;
&--1 {
transform: rotateZ(60deg);
}
&--2 {
transform: rotateZ(120deg);
}
&--3 {
transform: rotateZ(180deg);
}
}
这篇关于如何围绕同一原点旋转多个SVG重用元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文