SVG 点的绘制顺序是什么？

Question

我一直在尝试编写一个 SVG 作为我网站上 a 标签的外部 link 图标。我想创建一个指向右上角的指针，但它似乎总是指向右下角。

起初我试过：

<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 的结果相同。好像旋转到右下角了。

这是怎么回事？

Answer 1

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

That is, the top left corner of the document is considered to be the point (0,0), or point of origin. Positions are then measured in pixels from the top left corner, with the positive x direction being to the right, and the positive y direction being to the bottom.

SVG 点的绘制顺序是什么？

In what order are SVG points plotted?

css

xml

svg