SVG的auto-start-reverse属性导致Visio无法打开文件且出现异常

问题原因 #

• Visio对SVG marker的orient="auto-start-reverse"属性存在兼容性问题，直接使用会导致文件无法打开；
• 切换为orient="auto"后，Visio对marker参考点（refX/refY）的定位逻辑与浏览器不一致，原箭头路径的refX=5设置会让箭头尖端偏离线条端点，导致箭头漂浮。

修复方法 #

调整marker的refX属性值，同时保留orient="auto"，让箭头尖端精准对齐线条末端，同时兼容Visio的解析逻辑：

修改后的完整SVG代码 #

<defs>
  <!-- A marker to be used as an arrowhead -->
  <marker
    id="arrow"
    viewBox="0 0 10 10"
    refX="10"  <!-- 从5改为10，让箭头尖端对齐线条端点 -->
    refY="5"
    markerWidth="6"
    markerHeight="6"
    orient="auto">  <!-- 使用Visio支持的auto属性 -->
    <path d="M 0 0 L 10 5 L 0 10 z" />
  </marker>
</defs>

<!-- A line with a marker -->
<line
  x1="10"
  y1="10"
  x2="90"
  y2="90"
  stroke="black"
  marker-end="url(#arrow)" />
</svg>

原理说明 #

• refX="10"：将marker的对齐点设置为箭头路径的尖端（路径中的10,5位置），让线条末端直接对齐箭头尖端，解决Visio中箭头偏移的问题；
• orient="auto"：Visio可识别该属性，自动根据线条方向旋转箭头，保证指向正确；
• 此修改在浏览器和Visio中均可正常显示，无需在Visio内手动调整。

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