I've been trying to write an SVG to act as an external link icon for a tags on my website. I would like to create a pointer that points to the top right but instead, it seems that it is always pointing to the bottom right.

At first I tried:

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Where the points go in a circle from left to right.

Then I tried a different method where the top right point of the polygon is 0,0 and I mapped out the rest of the points in relation to that:

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

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

And both SVGs have the same result. It almost seems like it is rotated to the bottom right.

What is going on?

CodePudding user response：

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.