如何围绕同一原点旋转多个 SVG 重用元素？答案

【问题标题】：How to rotate multiple SVG reused elements around same origin?如何围绕同一原点旋转多个 SVG 重用元素？
【发布时间】：2019-04-08 04:50:42
【问题描述】：

如何围绕同一个原点旋转 3 个不规则的 SVG 圆圈？它们被编写为路径并被重用。我已将变换原点设置为中心，我还缺少什么？它们应该都在同一个空间中，并且像这张图片一样在中心重叠

<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

【问题讨论】：

标签： css svg

【解决方案1】：

你想要transform-box: fill-box;，即

.circle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  perspective: 500px;
  &--1 {
    transform: rotateZ(60deg);
  }
  &--2 {
    transform: rotateZ(120deg);
  }
  &--3 {
    transform: rotateZ(180deg);
  }
}

【讨论】：

非常好，对此一无所知。最佳答案;)

【解决方案2】：

当 svg 绘制不在画布中心时，这会变得有点困难。我已经调整了 SVG viewBox 的值，看看下面的 sn-p：

svg {
  border: 1px solid red;
}

svg path {
  stroke: #333;
  stroke-width: 3px;
  fill: transparent;
}

.circle {
  transform-origin: 50% 50%;
}

.circle--1 {
  transform: rotateZ(90deg);
}

.circle--2 {
  transform: rotateZ(160deg);
}

.circle--3 {
  transform: rotateZ(270deg);
}

<svg width="900" height="500" viewBox="0 0 250 250">
  <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>

【讨论】：