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溢出设置为可见。 现在，我需要了解您需要在哪里输入文字。

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>

加载此标签后，如何更改svg文本标签X Y？

1 个答案: