SVG <symbol>s refX/refX attribute and placing a <symbol> relative to its center

user_602242 0
Viewed 232

According to SVG's symbol documentation, I can add the refX/refY attributes to it.

If I understand correctly, I can use these attributes to define a reference point in the symbol's coordinate system so when I reference it with <use> element, it will be placed relative to that reference point (instead of the default upper left corner).

But these attributes don't seem to do that or have any effect on the symbol's placement at all. I can't find any additional information about these attributes (for symbol) or whether they are supported in any browser.

Is this how refX/refY actually suppose to work? Are they implemented in any browsers?

If not, Is there any other way to place a symbol with <use> element relative to the symbol's center without knowing/calculating its actual width/height in advance?

svg browser
1 Answers

I also found that the refX and refY don't work with the symbols. I did find a workaround to effectively do the same thing though. The key is setting the symbol "overflow" variable equal to "visible". The insertion point of the symbol, when using the "use" function, is the always the origin (0,0 coordinate) of the symbols coordinate system, so you simply have to set your symbol up in a way that makes the symbols origin on top of the point where you would like to insert it. I found it easies to do this using a transform because you simply need to use the negative values for the insertion point you want.

Example of making the insertion point the center of a square:

<symbol id="test" overflow="visible" >
   <g transform="translate(-50 -50)" >
      <rect x="0" y="0" width="100" height="100" stroke="black"/>
   </g>
</symbol>
user_161906340
Related