Question

有没有办法用CSS设置CSS动画（变换 - 旋转）的原点相对于元素<use/>的x，y？

在不同位置的给定<use/>中可能会有多个<svg/>：
每个元素的绝对位置可能不会在CSS中进行硬编码。

.spin {
  transition:4s linear;
  -webkit-transition:4s linear;
}
.spin:hover {
  transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
  transform:rotateZ(360eg);
  -webkit-transform:rotateZ(360deg);
}

 <body>
    <svg width="200" height="200" viewBox="0 0 200 200"  xmlns:svg="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" >
      <defs>
        <path id="shape1" d="M0,0 V20 H20 Z" fill="red" stroke="red" stroke-width="0" />
      </defs>

      <circle cx="0" cy="0" r="80" fill="none" stroke="green"/>
      <use xlink:href="#shape1" x="40" y="40" class="spin" />
    </svg>
  </body>

Answer 1

由于您使用<use>和x属性，因此动画y的变换很复杂。 The spec says那个：

x和y属性定义了另一个转换（translate（x，y），...
）

这个额外的变换组件可能会破坏您正在制作动画的变换，并产生意想不到的效果。

简单的解决方法是删除x和y属性，并使用父<g>元素设置路径的位置。

  <g transform="translate(40,40)">
    <use xlink:href="#shape1" class="spin" />
  </g>

更新了示例

.spin {
  transition:4s linear;
  -webkit-transition:4s linear;
}
.spin:hover {
  transform-origin: 0px 0px;
  -webkit-transform-origin: 0px 0px;
  transform:rotateZ(360eg);
  -webkit-transform:rotateZ(360deg);
}

<body>
    <svg width="200" height="200" viewBox="0 0 200 200"  xmlns:svg="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" >
      <defs>
        <path id="shape1" d="M0,0 V20 H20 Z" fill="red" stroke="red" stroke-width="0" />
      </defs>

      <circle cx="0" cy="0" r="80" fill="none" stroke="green"/>
      <g transform="translate(40,40)">
        <use xlink:href="#shape1" class="spin" />
      </g>
    </svg>
  </body>

svg：use的CSS转换的起源

1 个答案: