html - 浏览器中的SVG是否支持CSS中重载的rotate()方法rotate(angle, centerX, centerY)？

Question

我读过一个旋转变换，该变换支持使用 rotate(angle, centerX, centerY) 围绕中心点旋转，但它在通过 CSS 应用时似乎不起作用。

它作为一个属性内联工作:

<svg>
  <circle cx="50" cy="50" r="3" style="fill: black"/>

  <g id="arrow" style="stroke: black">
     <line x1="60" y1="50" x2="90" y2="50"/>
     <polygon points="90, 50, 85 45, 85, 55"/>
  </g>

  <use xlink:href="#arrow" transform="rotate(60, 50, 50)"/>
</svg>

但是通过 CSS 样式规则应用时它不起作用:

#arrow2 {
  transform: rotate(60, 50, 50);
}

<svg>
  <circle cx="50" cy="50" r="3" style="fill: black"/>

  <g id="arrow" style="stroke: black">
     <line x1="60" y1="50" x2="90" y2="50"/>
     <polygon points="90, 50, 85 45, 85, 55"/>
  </g>

  <g id="arrow2" style="stroke: red">
     <line x1="60" y1="50" x2="90" y2="50"/>
     <polygon points="90, 50, 85 45, 85, 55"/>
  </g>
</svg>

Answer 1

CSS 和 SVG 的“transform”属性不同。在这种情况下，试试这个:

#arrow2 {
  transform: rotate(60deg);
  transform-origin: 50px 50px;
}

<svg>
  <circle cx="50" cy="50" r="3" style="fill: black"/>

  <g id="arrow" style="stroke: black">
     <line x1="60" y1="50" x2="90" y2="50"/>
     <polygon points="90, 50, 85 45, 85, 55"/>
  </g>

  <g id="arrow2" style="stroke: red">
     <line x1="60" y1="50" x2="90" y2="50"/>
     <polygon points="90, 50, 85 45, 85, 55"/>
  </g>
</svg>