I am working with a SVG element which contains a text element with the following structure
<g >
<text 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>
I am trying to provide an x
and y
attribute to each of the tspan by doing this
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');
});
As a result, Firefox returns this,
whereas Chrome/Edge returns this
How can I make Chrome/Edge returns what Firefox returns, i.e. each tspan with x
and constant y
attribute? The full code is following
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 width="1280" height="720" fill="#EFEFEF"></rect>
<g >
<text 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>
CodePudding user response:
The solution is to remove alignment-baseline="hanging"
from <tspan/>
or if you need this attribute initially, you can remove it in a loop before determining the position of <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 width="1280" height="720" fill="#EFEFEF"></rect>
<g >
<text 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>