I am working with a SVG element which contains a text element with the following structure
<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>
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, ie 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 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>
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 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.