SVG在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');
    });

因此，火狐返回

​

而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

解决方案是从alignment-baseline="hanging"中删除<tspan/>，或者如果您最初需要此属性，可以在确定<tspan/>的位置之前在循环中删除它。

​

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>

​