Question

我正在尝试通过CSS旋转包含SVG的单个对象。虽然设置了'tranform-origin'，但我无法绕着元素的中心进行旋转。

HTML：

<svg xmlns="http://www.w3.org/2000/svg" width="8.94" height="31.23" viewBox="0 0 8.94 31.23">
  <defs>
    <g id="el">
      <rect x="1.86" y="0.2" width="5.22" height="30.82" transform="translate(-1.87 0.66) rotate(-7)"></rect>
    </g>
  </defs>
</svg>

<svg class="canvas">
  <use x="49%" y="76%" href="#el"></use>
  <use x="80%" y="63%" href="#el"></use>
  <use x="5%" y="32%" href="#el"></use>
  <use x="80%" y="12%" href="#el"></use>
</svg>

CSS：

  .canvas {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.canvas use:nth-child(4){
  fill: red;
  transform-origin: 50% 50%;
  transform: rotate(20deg);
}

我做了一个JSfiddle来清楚地说明问题。我要做的是将红色元素20deg旋转到它自己的中心周围。但它一直围绕左上角旋转。

Answer 1

对于SVG元素，与HTML不同，坐标系不是由其本地边界框定义的：

对于没有关联CSS布局框的SVG元素，水平和垂直偏移表示距元素局部坐标空间的原点的偏移。

在您的情况下，坐标系是.canvas的坐标系，<use>元素围绕其中心旋转。

您必须将元素的中心计算为“边界框的位置+中心”，因此对于x = 80％的元素，y = 12％，边界框为8.95px×31.25px：

.canvas use:nth-child(4){
    transform-origin: calc(80% + 4.475px) calc(12% + 15.625px);
    transform: rotate(20deg);
}

Answer 2

我确实想发布这个评论作为评论，因为我觉得它没有完全解决，但是它太长了，不适合评论所以这里作为答案：

当您使用<use>标记时，转换似乎是基于路径是否位于左上角。因此，您可以执行的操作不是%使用transform-origin使用vh和vw而使用.canvas宽度（这仅适用，因为您已将.canvas use:nth-child(4){ fill: red; transform-origin: 80vw 12vh; transform: rotate(20deg); }设置为显示的大小）并将其设置为等于路径的偏移量。这将旋转中心带到路径所在的位置。

所以在你的情况下，这将是：

.canvas {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.canvas use:nth-child(4){
  fill: red;
  transform-origin: 80vw 12vh;
  transform: rotate(20deg);
}

这样可行，但它并没有真正解决根本问题。

<svg xmlns="http://www.w3.org/2000/svg" width="8.94" height="31.23" viewBox="0 0 8.94 31.23">
  <defs>
    <g id="el">
      <rect x="1.86" y="0.2" width="5.22" height="30.82" transform="translate(-1.87 0.66) rotate(-7)"></rect>
    </g>
  </defs>
</svg>

<svg class="canvas">
  <use x="49%" y="76%" href="#el"></use>
  <use x="80%" y="63%" href="#el"></use>
  <use x="5%" y="32%" href="#el"></use>
  <use x="80%" y="12%" href="#el"></use>
</svg>

D:/test.mp4

CSS在对象中心周围旋转SVG重复的<use>元素

2 个答案: