当此标记加载时，如何更改svg文本标记XY？

Question

svg code is here

  function calculateXY(text, angle) { text.setAttribute('x',111.5 * Math.cos(angle) + 142.5); text.setAttribute('y',111.5 * Math.sin(angle) + 142.5); } 

 <svg width="285" height="285" class="pie-svg" > <g> <circle class="pie-1" r="111.5" cx="142.5" cy="142.5" stroke="#303840" stroke-dasharray="175 525" transform="rotate(0, 142.5,142.5)"></circle> <text class="pie-text-percent" onload="calculateXY(this, 45)" fill="#ffffff" transform="rotate(90, 142.5,142.5)">25%</text> </g> </svg> 

I want to change text xy when this tag load, but it not working, what can I do?

Answer 1

I've changed text.setAttribute to text.setAttributeNS and it kind of works. However the text falls outside the svg canvas and you can see it because I've set the svg overflow to visible. Now I need to understand where do you need the text.

 function calculateXY(text, angle) { text.setAttributeNS(null,'x',111.5 * Math.cos(angle) + 142.5); text.setAttributeNS(null,'y',111.5 * Math.sin(angle) + 142.5); } 

 svg{border:1px solid;overflow:visible} circle{fill:none} 

 <svg width="285" height="285" class="pie-svg" > <g> <circle class="pie-1" r="111.5" cx="142.5" cy="142.5" stroke="#303840" stroke-dasharray="175 525" transform="rotate(0, 142.5,142.5)"></circle> <text class="pie-text-percent" onload="calculateXY(this, 45)" fill="#000" transform="rotate(90, 142.5,142.5)">25%</text> </g> </svg>