How to center element inside SVG polygon

Question

I have SVG that is assembled from multiple polygons. I am trying to put image/button inside polygon center but what ever I try it always put image in x=0 and y=0 of the screen.

<Svg width="546px" height="794px" viewBox="0 0 546 794" version="1.1" >
    <G id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <G id="item0" transform="translate(1.000000, 1.000000)" fill="#EDAF51" fill-rule="nonzero" stroke="#720D00">
            <Polygon id="RX-03" points="206.65269...">
            </Polygon>
            <Circle x="0" y="0" cx="40" cy="40" r="15" fill="black" />              
        </G>

With this I get:

But if I put <Circle x="110" y="0" I get

And this is correct but I don't want to use x=110 I am trying to make this circle to be relative to it's parent polygon. So I can set circle to x=0 y=0 and to keep it inside area of parent polygon.

Answer 1

New answer on the comment of the author of the question

In svg, with mutual positioning between elements, there is only absolute positioning.
Relative positioning in svg, as you want - there is no circle relative to the parent polygon. Only absolute positioning of a circle will help to place it in the right place You can create a circle once and clone it several times while positioning:

<use xlink:href="#crc1" x="100" y="150" />

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="546px" height="794px" viewBox="0 0 546 794" >
  <defs>
    <circle id="crc1" cx="0" cy="0" r="15" stroke="red" />
</defs>	
	<image transform="translate(0, -300)" xlink:href="https://i.sstatic.net/q0PXl.png"
             width="100%" height="100%"
        />
		<use xlink:href="#crc1" x="100" y="150"  />
		  <use xlink:href="#crc1" x="210" y="110"  />
		    <use xlink:href="#crc1" x="300" y="190"  /> 
			  <use xlink:href="#crc1" x="385" y="190"  />
			    <use xlink:href="#crc1" x="500" y="190"  />
</svg>
</div>