SVG中如何为组/符号的所有子元素统一设置transform-origin

嘿，我完全懂你头疼的点——想复用SVG图形还得每个<use>都手动加一遍transform-origin，实在太繁琐了！这其实是SVG里<use>和<symbol>的特殊渲染机制导致的，咱们一步步拆解清楚：

为什么之前的设置都不生效？ #

根据SVG的渲染规则，当<use>引用<symbol>时，浏览器会在后台悄悄做个「替换操作」：把<use>转换成一个<g>容器，同时把<symbol>替换成一个内嵌的<svg>元素。这就造成了两个关键问题：

• 你给<symbol>里的<ellipse>加的transform-origin，只对那个内嵌<svg>里的椭圆自身生效，和外部<use>上的变换完全无关；
• 你给<use>加的transform（比如rotate(45)）是直接作用在<use>对应的<g>容器上的，这个容器的transform-origin不会自动继承内部元素的设置，必须单独指定。

三种不用重复写的解决方案 #

1. 给父容器统一设置transform-origin

既然所有<use>都在同一个<g>里，直接给这个父<g>添加transform-origin，所有子元素都会自动继承：

svg .rotate-group {
  transform-origin: center;
}

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <symbol id="svg-ellipse">
    <ellipse cx="500" cy="500" rx="140" ry="455"/>
  </symbol>
  <g class="rotate-group" fill="none" stroke="red" stroke-width="50">
    <use xlink:href="#svg-ellipse"/>
    <use xlink:href="#svg-ellipse" transform="rotate(45)"/>
    <use xlink:href="#svg-ellipse" transform="rotate(90)"/>
    <use xlink:href="#svg-ellipse" transform="rotate(-45)"/>
  </g>
</svg>

2. 在<symbol>内部嵌套变换容器

如果你希望变换原点是图形自身的中心，可以在<symbol>里先套一层<g>，把transform-origin设置在这个<g>上，这样外部<use>的变换就会基于这个预设的原点生效：

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <symbol id="svg-ellipse">
    <g style="transform-origin: center">
      <ellipse cx="500" cy="500" rx="140" ry="455"/>
    </g>
  </symbol>
  <g fill="none" stroke="red" stroke-width="50">
    <use xlink:href="#svg-ellipse"/>
    <use xlink:href="#svg-ellipse" transform="rotate(45)"/>
    <use xlink:href="#svg-ellipse" transform="rotate(90)"/>
    <use xlink:href="#svg-ellipse" transform="rotate(-45)"/>
  </g>
</svg>

3. 用SVG原生变换直接指定原点

SVG的rotate变换本身支持直接定义原点，格式是rotate(角度, 原点X坐标, 原点Y坐标)，这样连transform-origin都不用设置了，完全贴合SVG的原生逻辑：

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
  <symbol id="svg-ellipse">
    <ellipse cx="500" cy="500" rx="140" ry="455"/>
  </symbol>
  <g fill="none" stroke="red" stroke-width="50">
    <use xlink:href="#svg-ellipse"/>
    <use xlink:href="#svg-ellipse" transform="rotate(45 500 500)"/>
    <use xlink:href="#svg-ellipse" transform="rotate(90 500 500)"/>
    <use xlink:href="#svg-ellipse" transform="rotate(-45 500 500)"/>
  </g>
</svg>

这三种方法都能帮你摆脱重复写transform-origin的麻烦，选哪种看你具体的场景需求就行！

内容的提问来源于stack exchange，提问作者soulshined