javascript - 加载此标签时如何更改 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 Canvas 之外，您可以看到它，因为我已将 svg 溢出设置为可见。 现在我需要了解您在哪里需要文本。

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>