为何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
相关产品推荐
相关产品推荐

