为何SVG <use>在Safari中的尺寸与定位和Firefox、Chrome不一致？

在SVG的<defs>区块中定义<symbol>后，使用<use>元素调用时，该元素在Safari中无法正确缩放和定位，但在Firefox与Chrome中表现正常。

以下代码在Firefox和Chrome中会在方框中心显示两个重叠的小实心圆，但在Safari中，通过<use>调用的圆尺寸过大且位置偏移：

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="mark" width="8" height="8" viewBox="0 0 8 8">
            <circle cx="4" cy="4" r="4"/>
        </symbol>
    </defs>
    <g>
        <use href="#mark" x="46" y="46" fill="black"/>
        <circle href="#mark" cx="50" cy="50" r="2" stroke="none" fill="red"/>
        <rect x="0" y="0" width="100" height="100" stroke="red" fill="none"/>
    </g>
</svg>

效果对比 #

• Safari输出效果：
• Firefox输出效果：

请问我在viewbox和尺寸设置方面遗漏了什么？

问题原因与解决方法 #

问题出在Safari对<symbol>元素的width/height属性与viewBox的组合处理逻辑和其他浏览器不一致：当<symbol>同时声明width/height和viewBox时，Safari没有正确基于viewBox进行缩放计算，反而直接将symbol的尺寸当作渲染尺寸，导致<use>调用时出现偏移和缩放异常。

解决方法1：移除<symbol>的width/height属性

<symbol>作为可复用的图形模板，仅通过viewBox定义其坐标系统即可，多余的width/height会干扰Safari的渲染逻辑。修改后的<symbol>如下：

<symbol id="mark" viewBox="0 0 8 8">
    <circle cx="4" cy="4" r="4"/>
</symbol>

同时在<use>元素上明确指定显示尺寸：

<use href="#mark" x="46" y="46" fill="black" width="8" height="8"/>

解决方法2：显式为<use>指定width/height

如果需要保留<symbol>的width/height，只需在<use>元素上显式声明尺寸，覆盖Safari的默认行为：

<use href="#mark" x="46" y="46" fill="black" width="8" height="8"/>

另外注意：原代码中第二个<circle>使用href="#mark"是错误用法，<circle>不支持href属性，应改为<use>元素，并根据需要设置尺寸以实现与红色小圆重叠的效果：

<use href="#mark" cx="50" cy="50" width="4" height="4" fill="red"/>

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