解析嵌入SVGPatternElement的SVGUseElement上的变换问题

我正尝试解析嵌入在<pattern>元素中的<use>元素上的变换。如下示例SVG中，图片本应填充圆形元素的范围，但当前<use>的缩放值0.00042735不符合预期，正确值应为0.0149。对于translate、matrix等其他变换，也存在类似的差异。我最初猜测这与pattern元素的瓦片尺寸相对SVG或圆形元素的比例有关，但调整瓦片尺寸仅影响渲染图像的分辨率，并未修正变换值的问题。

示例SVG代码 #

<svg viewBox="0 0 239 57">
  <circle cx="28.5" cy="24.5" r="17.5" fill="url(#pattern0)"/>
  <defs>
    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use href="#image0_7_9" transform="scale(0.00042735)"/>
    </pattern>
    <image id="image0_7_9" width="2340" height="2340" href="image.png" />
  </defs>
</svg>

问题原因与计算逻辑 #

问题的核心在于patternContentUnits="objectBoundingBox"的坐标系统规则：

• 当设置为objectBoundingBox时，图案内容的坐标系统以被填充元素的边界框为基准，范围是0到1（即1单位等于边界框的宽度/高度）。这里圆形的边界框是边长为35的正方形（半径17.5，直径=2×17.5）。
• 当前的缩放值0.00042735是直接将图片像素尺寸映射到SVG视口坐标（239x57）的结果，完全忽略了objectBoundingBox的坐标转换规则。

正确的缩放值计算步骤：

1. 计算圆形边界框占SVG视口的比例：35 / 239 ≈ 0.1464
2. 将该比例转换为objectBoundingBox坐标系下的缩放值：0.1464 / 2340 ≈ 0.0149，这就是符合预期的正确值。

解析变换的关键要点 #

在解析<use>元素的变换时，必须结合以下参数做坐标转换：

• 被填充元素的边界框尺寸
• SVG的视口尺寸（viewBox定义的范围）
• 图案的patternContentUnits属性值（区分objectBoundingBox和userSpaceOnUse两种模式）
• 被引用元素（如示例中的<image>）的原始尺寸

内容的提问来源于stack exchange，提问作者Johan Martin Aarstein