Как я могу изменить текстовый тег SVG X Y при загрузке этого тега?

Question

svg код здесь

    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>

Я хочу изменить текст xy, когда этот тег загружается, но он не работает, что я могу сделать?

Answer 1

Я изменил text.setAttribute на text.setAttributeNS, и это вроде работает. Однако текст выходит за пределы холста svg, и вы можете видеть его, потому что я установил для переполнения svg значение visible. Теперь мне нужно понять, где вам нужен текст.

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>