svg 的 CSS 转换的起源：使用答案

【问题标题】：Origin of CSS transform for svg:usesvg 的 CSS 转换的起源：使用
【发布时间】：2018-05-04 18:19:59
【问题描述】：

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

在给定的<svg/> 中可能有多个<use/> 在不同的地方：
每个元素的绝对位置可能不会在 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>

【问题讨论】：

火狐支持transform-box
How to set the transform origin to a specific point on the element?的可能重复
不幸的是，它看起来链接到变换是应用的位置“而不是” 的位置至少，这是我所期望的。在某些情况下，像这样对应用变换并不是目标。

标签： svg css-transitions

【解决方案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>

【讨论】：