SVG tspan 不正確 position 在 Chrome/Edge 中，但在 Firefox 中不正確

Question

我正在使用 SVG 元素，其中包含具有以下結構的文本元素

    <g class="textGroup2">
          <text class="split0" x="640" y="80" dy="0" stroke="black">
            <tspan alignment-baseline="hanging" data-t="0" style="font-size: xx-large;">S</tspan>
            <tspan alignment-baseline="hanging" data-t="1" style="font-size: xx-large;">V</tspan>
            <tspan alignment-baseline="hanging" data-t="2" style="font-size: xx-large;">G</tspan>
          </text>
      </g>

我試圖通過這樣做為每個 tspan 提供一個x和y屬性

    document.querySelectorAll('body > svg > g.textGroup2 > text[class^="split"]>tspan').forEach(
    (a, i) => {
        const dim = a.getStartPositionOfChar(0);
        a.setAttribute('x', `${dim.x}`);
        a.setAttribute('y', `${dim.y}`);
        a.removeAttribute('alignment-baseline');
    });

結果， Firefox返回這個，

而Chrome/Edge返回這個

如何讓 Chrome/Edge 返回 Firefox 返回的內容，即每個具有x和常量y屬性的 tspan？ 完整代碼如下

 document.querySelectorAll('body > svg > g.textGroup2 > text[class^="split"]>tspan').forEach( (a, i) => { const dim = a.getStartPositionOfChar(0); a.setAttribute('x', `${dim.x}`); a.setAttribute('y', `${dim.y}`); a.removeAttribute('alignment-baseline'); });

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720"> <rect class="vBoxRect" width="1280" height="720" fill="#EFEFEF"></rect> <g class="textGroup2"> <text class="split0" x="640" y="80" dy="0" stroke="black"> <tspan alignment-baseline="hanging" data-t="0" style="font-size: xx-large;">S</tspan> <tspan alignment-baseline="hanging" data-t="1" style="font-size: xx-large;">V</tspan> <tspan alignment-baseline="hanging" data-t="2" style="font-size: xx-large;">G</tspan> </text> </g> </svg>

Answer 1

解決方案是從<tspan/>中刪除alignment-baseline="hanging"或者如果您最初需要此屬性，您可以在確定<tspan/>的 position 之前循環刪除它。

 document.querySelectorAll('body > svg > g.textGroup2 > text[class^="split"]>tspan').forEach((a, i) => { a.removeAttribute('alignment-baseline'); const dim = a.getStartPositionOfChar(0); a.setAttribute('x', `${dim.x}`); a.setAttribute('y', `${dim.y}`); });

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720"> <rect class="vBoxRect" width="1280" height="720" fill="#EFEFEF"></rect> <g class="textGroup2"> <text class="split0" x="640" y="80" dy="0" stroke="black"> <tspan alignment-baseline="hanging" data-t="0" style="font-size: xx-large">S</tspan> <tspan alignment-baseline="hanging" data-t="1" style="font-size: xx-large">V</tspan> <tspan alignment-baseline="hanging" data-t="2" style="font-size: xx-large">G</tspan> </text> </g> </svg>