SVG：非缩放标记在Safari中失效（Chrome可正常工作）

我制作了一个替代<hr>的SVG，要求随容器宽度按比例缩放，但首尾的<marker>元素和描边不能缩放。该效果在Chrome中正常，但Safari里标记会改变尺寸甚至水平拉伸。尝试过preserveAspectRatio="none"无效，SVG语法是否有问题？

原SVG代码：

<svg viewBox='0 0 300 4' xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker 
      id='diamond'
      viewBox='0 0 10 10'
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6">
      <polygon points="0,5 5,0 10,5 5,10" fill="#9A8654" /> 
    </marker>
  </defs>
  <line x1='1' y1='2' x2='299' y2='2' stroke='#9A8654' stroke-width='1' vector-effect="non-scaling-stroke" stroke-dasharray='2 2' marker-start='url(#diamond)' marker-end='url(#diamond)'/>
</svg>

问题根源 #

Safari 对 vector-effect="non-scaling-stroke" 的支持不包含 marker 元素，且容器缩放时，marker 的坐标系统会跟随 SVG 整体缩放，导致标记变形。

修复方案 #

通过以下调整确保 marker 在所有浏览器中保持固定尺寸：

1. 给 marker 添加 vector-effect="non-scaling-size"，强制标记不随缩放改变尺寸，这是 Safari 更可靠支持的属性。
2. 微调 line 的坐标，让虚线与标记衔接更自然，避免标记超出可视范围。
3. 保留 preserveAspectRatio="none" 保证 SVG 填充容器宽度，同时不影响标记尺寸。

修复后的代码：

<svg viewBox='0 0 300 4' xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <defs>
    <marker 
      id='diamond'
      viewBox='0 0 10 10'
      refX="5"
      refY="5"
      markerWidth="6"
      markerHeight="6"
      vector-effect="non-scaling-size">
      <polygon points="0,5 5,0 10,5 5,10" fill="#9A8654" /> 
    </marker>
  </defs>
  <line x1='3' y1='2' x2='297' y2='2' stroke='#9A8654' stroke-width='1' vector-effect="non-scaling-stroke" stroke-dasharray='2 2' marker-start='url(#diamond)' marker-end='url(#diamond)'/>
</svg>

关键修改说明 #

• vector-effect="non-scaling-size"：作用于 marker，强制其保持定义的 markerWidth 和 markerHeight 尺寸，不会随 SVG 整体缩放而拉伸变形，完美适配 Safari 的渲染逻辑。
• 调整 line 的 x1/x2 坐标：两端各缩进3px，避免 marker 超出 SVG 可视范围，同时让虚线和标记的衔接更自然。

修改后，SVG 在 Safari 和 Chrome 中表现一致：容器宽度变化时，虚线部分按比例拉伸，首尾的菱形标记始终保持固定大小。

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