解决SVG图案中复用symbol出现模糊的问题

问题现象 #

在SVG的pattern中复用symbol时，元素出现模糊（边缘不清晰、复杂模糊），即使调整patternUnits、pattern及symbol的viewBox等参数也无法解决。相关代码如下：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="70mm" height="84mm">

<defs>
<symbol id="Pole" viewBox="0 0 30 30">
    <path fill="#666" fill-rule="evenodd" d="m 9 9 l 3 6 l -3 6 l 6 -3 l 6 3 l -3 -6 l 3 -6 l -6 3 z m -6 4 v 4 h 10 v 8 h 4 v -8 h 10 v -4 h -10 v -8 h -4 v 8 z m 12 -13 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30"/>
</symbol>

<pattern id="Poles_StepDependedWidth" x="0" y="0" width=".25" height="1" patternUnits="objectBoundingBox">
    <rect height="100%" width="100%" fill="red" opacity="0.25" />
    <use href="#Pole" width="7mm" height="7mm" />
</pattern>
</defs>

<rect x="7mm" y="4.5mm" height="7mm" width="70mm" fill="url(#Poles_StepDependedWidth)"/>
<use href="#Pole" x="0" y="4.5mm" width="7mm" height="7mm" />

</svg>

问题原因 #

模糊的核心原因是pattern内部使用绝对单位（mm）定义symbol尺寸，与pattern的objectBoundingBox单位体系不兼容，导致渲染时出现坐标对齐偏差和缩放插值失真。当pattern使用objectBoundingBox时，内部元素的单位会被视为相对容器的比例，而绝对单位会被强制转换，破坏了symbol的矢量精度。

解决方案 #

方法1：统一使用相对单位定义pattern内部元素 #

将pattern内部的use元素尺寸改为相对比例，配合symbol的viewBox实现精准缩放：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="70mm" height="84mm">

<defs>
<symbol id="Pole" viewBox="0 0 30 30">
    <path fill="#666" fill-rule="evenodd" d="m 9 9 l 3 6 l -3 6 l 6 -3 l 6 3 l -3 -6 l 3 -6 l -6 3 z m -6 4 v 4 h 10 v 8 h 4 v -8 h 10 v -4 h -10 v -8 h -4 v 8 z m 12 -13 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30"/>
</symbol>

<pattern id="Poles_StepDependedWidth" x="0" y="0" width=".25" height="1" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
    <rect height="1" width="1" fill="red" opacity="0.25" />
    <!-- 使用相对比例匹配pattern尺寸，确保矢量对齐 -->
    <use href="#Pole" width="1" height="1" viewBox="0 0 30 30" />
</pattern>
</defs>

<rect x="7mm" y="4.5mm" height="7mm" width="70mm" fill="url(#Poles_StepDependedWidth)"/>
<use href="#Pole" x="0" y="4.5mm" width="7mm" height="7mm" />

</svg>

关键修改点：

• 添加patternContentUnits="objectBoundingBox"，让pattern内部元素使用相对容器的比例单位
• 将use的width/height改为1（对应pattern的100%尺寸），通过symbol的viewBox自动适配缩放

方法2：使用用户单位（userSpaceOnUse）定义pattern #

如果需要保留绝对单位，将pattern的单位体系改为userSpaceOnUse，确保内部元素的绝对尺寸与外部容器坐标系一致：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="70mm" height="84mm">

<defs>
<symbol id="Pole" viewBox="0 0 30 30">
    <path fill="#666" fill-rule="evenodd" d="m 9 9 l 3 6 l -3 6 l 6 -3 l 6 3 l -3 -6 l 3 -6 l -6 3 z m -6 4 v 4 h 10 v 8 h 4 v -8 h 10 v -4 h -10 v -8 h -4 v 8 z m 12 -13 a 1 1 0 0 0 0 30 a 1 1 0 0 0 0 -30"/>
</symbol>

<!-- 改为userSpaceOnUse，pattern尺寸使用绝对单位 -->
<pattern id="Poles_StepDependedWidth" x="0" y="0" width="17.5mm" height="7mm" patternUnits="userSpaceOnUse">
    <rect height="100%" width="100%" fill="red" opacity="0.25" />
    <use href="#Pole" width="7mm" height="7mm" />
</pattern>
</defs>

<rect x="7mm" y="4.5mm" height="7mm" width="70mm" fill="url(#Poles_StepDependedWidth)"/>
<use href="#Pole" x="0" y="4.5mm" width="7mm" height="7mm" />

</svg>

关键修改点：

• 将patternUnits改为userSpaceOnUse
• 计算pattern的绝对宽度：原width=".25"对应目标rect宽度的25%，即70mm×0.25=17.5mm，保持pattern重复间隔与原需求一致

验证效果 #

修改后，pattern内的symbol元素会与直接复用的symbol保持相同的清晰度，边缘无模糊、无插值失真。

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