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

Question

我正在尝试通过 CSS 旋转包含 SVG 的单个对象。尽管设置了“转换原点”，但我无法围绕元素中心进行旋转。

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 来说明问题。我想要做的是将红色元素围绕它自己的中心旋转 20 度。但它一直在左上角旋转。

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>