SVG点的绘制顺序是怎样的？自定义箭头方向与预期不符怎么办

• 核心根源是SVG默认坐标系规则和常规数学坐标系不同：SVG以画布左上角为(0,0)原点，x轴正方向向右，y轴正方向向下，你按照y轴向上逻辑定义的坐标会上下翻转，自然箭头朝向和预期相反。
• 你给出的两段代码实际渲染出来的顶点坐标完全一致，所以最终显示效果没有区别：第一段直接用了适配SVG坐标系但顶点顺序不对的坐标，第二段你使用负y值定义顶点、再把use元素定位到(18,18)，刚好把顶点映射到了和第一段完全相同的位置，最终得到的都是朝右下的箭头。

方案1：直接适配SVG坐标系定义坐标 #

直接按照y轴向下的规则调整顶点坐标即可，以下是可用的外部链接图标示例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="1em" height="1em">
  <!-- 右上指向的箭头 -->
  <polygon points="17 3 17 9 13 5 6 12 8 14 15 7 11 7" />
  <!-- 外部链接的方框边框 -->
  <path d="M4 4v12h12v-6" fill="none" stroke="currentColor" stroke-width="2" />
</svg>

这个代码可以直接嵌入a标签使用，fill="currentColor"会自动继承父元素的文字颜色，适配不同主题。

方案2：翻转坐标系适配常规数学逻辑 #

如果你更习惯使用y轴向上的坐标系，可以通过变换翻转整个画布的y轴：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -20 20 20">
  <g transform="scale(1,-1)">
    <!-- 这里的坐标规则和常规数学坐标系完全一致，y轴向上 -->
    <polygon points="5 2 18 2 18 15 16 15 16 5 6 5" fill="black" />
  </g>
</svg>

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