按钮Transform过渡导致子SVG在过渡首尾出现位置跳动问题求助

问题场景 #

开发Stencil导航按钮组件时，给内部SVG图标加了hover缩放过渡，但部分按钮hover时图标会先随机跳一下再过渡，结束后又跳回，跳动方向幅度和页面位置有关。移除内外边距能解决但不符合需求；把SVG放div里给div加过渡，div平滑但SVG还是跳。

问题代码如下：

<my-element></my-element>
<my-element></my-element>
<my-element></my-element>
<script>
  customElements.define("my-element", class extends HTMLElement {
    constructor() {
      super()
        .attachShadow({mode: "open"})
        .innerHTML = `
            <style>
              :host {
                display: inline-block;
              }

              button {
                display: block;
                border-radius: 8px;
                margin: 0;
                padding: 0.6rem;
                border: none;
                cursor: pointer;
              }

              svg {
                display: block;
                width: 4rem;
                height: 4rem;
                padding: 0;
                margin: 0;
                -webkit-transition: all 1s ease;
                -moz-transition: all 1s ease;
                -o-transition: all 1s ease;
                transition: all 1s ease;
                transform: scale(1);
              }

              :host(:not([active]):not([disabled])) button:hover svg {
                transform: scale(1.2);
              }
            </style>
            <button disabled={this.disabled}>
              <svg>
                <use href="#circ">
                  <?xml version="1.0" encoding="UTF-8"?>
                  <svg height="24" width="24">
                   <symbol viewBox="0 0 24 24" id="circ">
                    <circle cx="12" cy="12" r="12" stroke="none" stroke-width="3" fill="red" />
                    </symbol>
                  </svg>
                </use>
              </svg>
            </button>`;
    }
  });
</script>

问题原因 #

1. SVG内部嵌套<symbol>的写法错误，<use>引用的是未正确注册的内部元素，导致浏览器计算SVG布局时出现偏差；
2. 默认transform-origin虽然是中心，但SVG的坐标系统（viewBox、内部symbol）可能让浏览器自动计算原点时出现误差，触发重排位置突变；
3. 过渡用all会触发不必要的属性计算，加重渲染负担，放大布局偏差。

解决方法 #

1. 修正SVG引用结构 #

把<symbol>移到组件外部或shadow DOM的隐藏容器里，避免嵌套导致的布局计算异常：

<!-- 全局隐藏的symbol定义 -->
<svg style="display: none;">
  <symbol viewBox="0 0 24 24" id="circ">
    <circle cx="12" cy="12" r="12" stroke="none" stroke-width="3" fill="red" />
  </symbol>
</svg>

2. 明确设置transform-origin #

给SVG指定变换原点，确保缩放始终围绕中心进行：

svg {
  transform-origin: center; /* 等价于50% 50% */
}

3. 优化过渡属性 #

只过渡transform而不是all，减少不必要的渲染计算：

svg {
  transition: transform 1s ease;
}

4. 添加渲染优化提示 #

用will-change告诉浏览器提前优化SVG的变换渲染：

svg {
  will-change: transform;
}

5. 调整按钮布局 #

给按钮加overflow: hidden，避免SVG缩放时触发按钮重排：

button {
  overflow: hidden;
}

修正后完整代码 #

<svg style="display: none;">
  <symbol viewBox="0 0 24 24" id="circ">
    <circle cx="12" cy="12" r="12" stroke="none" stroke-width="3" fill="red" />
  </symbol>
</svg>

<my-element></my-element>
<my-element></my-element>
<my-element></my-element>
<script>
  customElements.define("my-element", class extends HTMLElement {
    constructor() {
      super()
        .attachShadow({mode: "open"})
        .innerHTML = `
            <style>
              :host {
                display: inline-block;
              }

              button {
                display: block;
                border-radius: 8px;
                margin: 0;
                padding: 0.6rem;
                border: none;
                cursor: pointer;
                overflow: hidden;
              }

              svg {
                display: block;
                width: 4rem;
                height: 4rem;
                padding: 0;
                margin: 0;
                transition: transform 1s ease;
                transform: scale(1);
                transform-origin: center;
                will-change: transform;
              }

              :host(:not([active]):not([disabled])) button:hover svg {
                transform: scale(1.2);
              }
            </style>
            <button disabled=${this.disabled}>
              <svg>
                <use href="#circ"></use>
              </svg>
            </button>`;
    }
  });
</script>

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