[英]Incorrect SVG Mask Position On Load When Using Relative Positions (Chrome)
[英]SVG tspan incorrect position in Chrome/Edge but not in Firefox
我正在使用 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 返回 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>
解决方案是从<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.