Css 如何围绕同一原点旋转多个SVG重用元素?
如何围绕同一原点旋转3个不规则SVG圆?它们作为路径写入并重用。我已将“变换原点”设置为“中心”,我还缺少什么?它们都应该在同一个空间,并在中心重叠,如图所示Css 如何围绕同一原点旋转多个SVG重用元素?,css,svg,Css,Svg,如何围绕同一原点旋转3个不规则SVG圆?它们作为路径写入并重用。我已将“变换原点”设置为“中心”,我还缺少什么?它们都应该在同一个空间,并在中心重叠,如图所示 svg{ 宽度:900px; 路径{ 冲程:#333; 笔画宽度:3px; 填充:透明; } } g{ 位置:相对位置; 变换原点:中心; } .圆圈{ 变换原点:50%50%; 透视图:500px; &--1 { 变换:旋转(60度); } &--2 { 变换:旋转(120度); } &--3 { 变换:旋转(180度); } }
svg{
宽度:900px;
路径{
冲程:#333;
笔画宽度:3px;
填充:透明;
}
}
g{
位置:相对位置;
变换原点:中心;
}
.圆圈{
变换原点:50%50%;
透视图:500px;
&--1 {
变换:旋转(60度);
}
&--2 {
变换:旋转(120度);
}
&--3 {
变换:旋转(180度);
}
}
你想要的,即
你想要的就是
当svg绘图不在画布上居中时,这会变得有点困难。我已经调整了SVG
viewBox
值,请查看以下代码片段:
svg{
边框:1px纯红;
}
svg路径{
冲程:#333;
笔画宽度:3px;
填充:透明;
}
.圆圈{
变换原点:50%50%;
}
.圆圈--1{
变换:旋转(90度);
}
.圆圈--2{
变换:旋转(160度);
}
.圆圈--3{
变换:旋转(270度);
}
当svg绘图不在画布上居中时,这会变得有点困难。我已经调整了SVG
viewBox
值,请查看以下代码片段:
svg{
边框:1px纯红;
}
svg路径{
冲程:#333;
笔画宽度:3px;
填充:透明;
}
.圆圈{
变换原点:50%50%;
}
.圆圈--1{
变换:旋转(90度);
}
.圆圈--2{
变换:旋转(160度);
}
.圆圈--3{
变换:旋转(270度);
}
非常好,对此一无所知。顶部答案;)很好,对此一无所知。顶部答案;)
<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);
}
}
.circle {
transform-box: fill-box;
transform-origin: 50% 50%;
perspective: 500px;
&--1 {
transform: rotateZ(60deg);
}
&--2 {
transform: rotateZ(120deg);
}
&--3 {
transform: rotateZ(180deg);
}
}