SVG 点按啥顺序绘制？

Posted 2023-03-28

【中文标题】SVG 点按啥顺序绘制？

【英文标题】：In what order are SVG points plotted?SVG 点按什么顺序绘制？

【发布时间】：2022-01-09 12:23:01

【问题描述】：

我一直在尝试编写一个 SVG 来充当我网站上 a 标记的外部链接图标。我想创建一个指向右上角的指针，但它似乎总是指向右下角。

一开始我试过：

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 20 20">
  <defs>
    <polygon id="arrow" points="5,15 18,18 15,5 14,14" />
  </defs>
  <g>
    <use x="0" y="0" fill="black" xlink:href="#arrow" />
  </g>
</svg>

这些点从左到右绕成一圈。

然后我尝试了另一种方法，其中多边形的右上角为 0,0，然后我绘制了与此相关的其余点：

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 20 20">
  <defs>
    <polygon id="arrow" points="0,0 -3,-13 -4,-4 -13,-3" />
  </defs>
  <g>
    <use x="18" y="18" fill="red" xlink:href="#arrow" />
  </g>
</svg>

两个 SVG 的结果相同。它几乎看起来像旋转到右下角。

发生了什么事？

【参考方案1】：

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions

也就是说，文档的左上角被认为是点 (0,0)，或者说原点。然后从左上角开始以像素为单位测量位置，x 正方向位于右侧，y 正方向位于底部。