关于理解SVG规范中vector-effect属性描述的困惑

核心规范定义 #

SVG规范对vector-effect的viewport和screen指定符的官方定义提炼：

• viewport（默认值）：向量效果仅作用于最近的带有viewBox属性的父视口范围内的变换，包含该视口自身的隐式变换（由width/height与viewBox不匹配产生的缩放、偏移），以及视口内部子元素的显式变换。
• screen：向量效果作用于从当前元素到根元素的所有父元素复合变换，即忽略所有上层变换，直接基于屏幕坐标系渲染效果。

示例矛盾的根源分析 #

你提到的示例结构为：顶级SVG（带viewBox隐式变换）→ 带旋转变换的组 → 内部SVG（带viewBox隐式变换）→ 带自身旋转变换的path。按规范逻辑：

• 当path设置vector-effect="viewport"时，应仅抵消内部SVG视口的隐式变换和自身变换，外部组的旋转变换应保留——也就是所谓的"非旋转"示例应该无效果，因为旋转变换发生在内部视口之外。
• 但实际示例表现却默认应用了screen的效果，抵消了所有外部变换，这属于示例标注错误或早期实现的遗留问题。

固定位置示例的异常解读 #

固定位置示例中效果作用于内部视口外的变换、却不作用于path自身变换的问题，本质是部分渲染引擎对viewport的范围判定错误：

• 错误地将顶级SVG视口判定为"最近的父视口"，而非嵌套的内部SVG视口；
• 混淆了变换的作用阶段，把视口外的变换纳入了viewport的作用范围。

正确技术逻辑总结 #

1. 视口判定规则：viewport指定的"父视口"是离当前元素最近的、带有viewBox属性的祖先元素，无论它是顶级SVG还是嵌套的<svg>标签。
2. 变换作用范围：
   • vector-effect="viewport"：仅忽略目标视口内的所有变换对向量效果的影响，视口外的父元素变换完全生效；
   • vector-effect="screen"：忽略从当前元素到根节点的所有变换，直接基于屏幕坐标系渲染向量效果。
3. 实现差异说明：不同浏览器/渲染引擎对"视口范围"的判定存在分歧，部分早期实现未严格遵循规范，导致表现不一致。

验证方法 #

可通过简化测试用例验证逻辑：

• 创建嵌套的两个<svg>元素，均设置viewBox属性；
• 内部SVG的子元素设置vector-effect="viewport"，观察是否仅抵消内部SVG的变换，外部SVG/组的变换是否保留。

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