You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

为何SVG的use标签与目标元素的transform属性会叠加生效?

SVG <use> 元素的 transform 属性继承问题疑惑

根据MDN文档说明,使用<use>标签复制SVG图形时,仅当源元素未设置对应属性时,才会从<use>标签继承该属性,文档列出了部分例外属性,但transform不在其中。

但在Firefox浏览器中,transform属性的表现却不符合这个规则:以下示例代码里,源元素<circle>已经设置了transform="scale(0.5, 1)",<use>标签又设置了transform="translate(10, 0)",按照文档预期,<use>的transform应该被忽略,但实际结果是两个变换叠加成了translate(10, 0) scale(0.5, 1)。

想请教:是文档描述有误,还是我对规则的理解存在偏差?

<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue" transform="scale(0.5, 1)" />
  <use href="#myCircle" x="0" fill="blue" transform="translate(10, 0)"/>
</svg>

内容的提问来源于stack exchange,提问作者EKW

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.13 18:32:33