how to get svg text tspan x,y position value in js
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-width: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, width: 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, width: 70.40625, height: 32}x: 430y: 386width: 70.40625height: 32__proto__: SVGRect
temp1.getBoundingClientRect();
// DOMRect {x: 427, y: 386, width: 70.40625, height: 32, top: 386, …}x: 427y: 386width: 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, width: 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, width: 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
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/12403527.html
未经授权禁止转载,违者必究!