xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

how to get svg text tspan x,y position value in js

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="976px" height="471px" viewBox="0 0 976 471" version="1.1">
    <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
    <title>Group</title>
    <desc>Created with Sketch.</desc>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Group" transform="translate(-3.000000, 0.000000)">
            <rect id="Rectangle" stroke="#979797" fill="#35D9F6" x="249.5" y="0.5" width="425" height="136"/>
            <text id="舞台" font-family="PingFangSC-Regular, PingFang SC" font-size="23" font-weight="normal" fill="#E35E1D">
                <tspan x="439" y="77">舞台</tspan>
            </text>
            <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-3"/>
            <polygon id="Polygon" stroke="#979797" fill="#F48787" points="79 216 154.133465 276.461013 125.435035 374.288987 32.5649651 374.288987 3.86653521 276.461013"/>
            <rect id="Rectangle" stroke="#979797" fill="#6250F3" x="262.5" y="332.5" width="405" height="138"/>
            <rect id="Rectangle" stroke="#979797" fill="#92E757" x="791.5" y="162.5" width="187" height="299"/>
            <text id="左边" font-family="PingFangSC-Regular, PingFang SC" font-size="23" font-weight="normal" fill="#61F849">
                <tspan x="56" y="312">左边</tspan>
            </text>
            <text id="后区-C" font-family="PingFangSC-Regular, PingFang SC" font-size="23" font-weight="normal" fill="#61F849">
                <tspan x="430" y="410">后区 C</tspan>
            </text>
            <text id="右区" font-family="PingFangSC-Regular, PingFang SC" font-size="23" font-weight="normal" fill="#F31FEF">
                <tspan x="862" y="320">右区</tspan>
            </text>
        </g>
    </g>
</svg>

getStartPositionOfChar(text) & getEndPositionOfChar(text)

temp1.getStartPositionOfChar(temp1);
// SVGPoint {x: 430, y: 410}

temp1.getEndPositionOfChar(temp1);
// SVGPoint {x: 453, y: 410}

temp1
// <text id=​"后区-C" font-family=​"PingFangSC-Regular, PingFang SC" font-size=​"23" font-weight=​"normal" fill=​"#61F849">​…​</text>​

temp1.getBBox();
// SVGRect {x: 430, y: 386,  70.40625, height: 32}

temp1.innerHTML;
/*"
                <tspan xmlns="http://www.w3.org/2000/svg" x="430" y="410">后区 C</tspan>
            "
*/

temp1.innerText
// undefined

temp1.textContent;
/*
"
                后区 C
            "
*/

temp1.getBBox();
// SVGRect {x: 430, y: 386,  70.40625, height: 32}x: 430y: 386 70.40625height: 32__proto__: SVGRect

temp1.getBoundingClientRect();
// DOMRect {x: 427, y: 386,  70.40625, height: 32, top: 386, …}x: 427y: 386 70.40625height: 32top: 386right: 497.40625bottom: 418left: 427__proto__: DOMRect

temp1.getAttribute(`fill`)
// "#61F849"

temp1.textLength;
// SVGAnimatedLength {baseVal: SVGLength, animVal: SVGLength}baseVal: SVGLength {unitType: 0, value: 70.40298461914062, valueInSpecifiedUnits: 70.40298461914062, valueAsString: "70.403"}unitType: 0value: 70.40298461914062valueInSpecifiedUnits: 70.40298461914062valueAsString: "70.403"__proto__: SVGLengthanimVal: SVGLength {unitType: 0, value: 70.40298461914062, valueInSpecifiedUnits: 70.40298461914062, valueAsString: "70.403"}__proto__: SVGAnimatedLength

temp1.getComputedTextLength();
// 70.40298461914062

temp1.getStartPositionOfChar(temp1);
// SVGPoint {x: 430, y: 410}

temp1.getEndPositionOfChar(temp1);
// SVGPoint {x: 453, y: 410}

---

firstElementChild.getAttribute("x") & firstElementChild.getAttribute("y")

temp1.getBBox();
// SVGRect {x: 430, y: 386,  70.40625, height: 32}

temp1.getCTM();
// SVGMatrix {a: 1, b: 0, c: 0, d: 1, e: -3, …}a: 1b: 0c: 0d: 1e: -3f: 0__proto__: SVGMatrix

temp1.childElementCount;
// 1
t
emp1.firstElementChild
// <tspan x=​"430" y=​"410">​后区 C​</tspan>​

temp1.firstElementChild.x;
// SVGAnimatedLengthList {baseVal: SVGLengthList, animVal: SVGLengthList}baseVal: SVGLengthList {0: SVGLength, length: 1, numberOfItems: 1}animVal: SVGLengthList {0: SVGLength, length: 1, numberOfItems: 1}__proto__: SVGAnimatedLengthList

temp1.firstElementChild.getBBox();
// SVGRect {x: 430, y: 386,  70.40625, height: 32}

temp1.firstElementChild.getAttribute(`x`);
// "430"

temp1.firstElementChild.getAttribute(`y`);
// "410"

---

http://tutorials.jenkov.com/svg/tspan-element.html

https://vanseodesign.com/web-design/svg-text-tspan-element/

https://stackoverflow.com/questions/20657512/svg-in-chrome-tspan-x-and-y-values-are-ignored

---