SVG 点按什么顺序绘制？

Question

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

起初我试过：

 <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>

其中点 go 从左到右绕一圈。

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

 <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

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