围绕对象中心旋转SVG重复使用元素的CSS旋转

Question

我是一名有用的助手，可以为您翻译文本。

我正在尝试通过CSS旋转一个包含SVG的单个对象。虽然已经设置了“transform-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来澄清问题。我想要做的是将红色元素绕其自身中心旋转20度。但它仍然围绕左上角旋转。

- maus

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);
} 

- ccprog

Answer 2

我本来想将这个作为评论发布，因为我觉得它还没有完全解决，但是它太长了，无法放在评论中，所以我把它作为答案发布了：

当你使用<use>标签时，变换似乎是基于路径是否在左上角。因此，你可以使用vh和vw而不是使用%来设置transform-origin，并将其设置为路径的偏移量。这将使旋转中心位于路径所在位置。

所以在你的例子中，这将是：

.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>

- M. Salman Khan