如何获得一个角色的风格<tspan>

Question

我们可以通过SVGTextContentElement.getExtentOfChar（索引）得到反应和位置
但如何获得任何内部印刷字符的风格

 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 400 200" width="400" height="200" > <rect width="100%" height="100%" fill="gray"/> <g style="text-align:center;text-anchor:middle;stroke:none;stroke-width:0;" transform="translate(100 100)"> <path style="fill:none;" stroke-width="1" stroke="blue" d="m 0,72 c 32,-16 52,-20 80,-20 28,0 48,4 80,20" transform="translate(0,-50)" id="path-upper" /> <text style="font-size:9px;" xml:space="preserve" id="t"> <textPath xlink:href="#path-upper" startOffset="50%" > <tspan x="0" dy="15" style="fill:red" id="outSpan"> abcd <tspan id="inSpan" style="fill:blue">efgh</tspan> </tspan> </textPath> </text> </g> </svg> 

document.querySelector("#outSpan").getExtentOfChar(2)
外部的tspan可以得到字符的位置，这是在里面的tspan。
我也需要通过索引获得一个字符的样式。
就像在代码片段中获得“efgh”中的“e”样式一样
“getComputedStyle”可以提供帮助吗？

Answer 1

调用getComputedStyle例如

 console.log(window.getComputedStyle(document.querySelector("#inSpan"), null).getPropertyValue("fill")) 

 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 400 200" width="400" height="200" > <rect width="100%" height="100%" fill="gray"/> <g style="text-align:center;text-anchor:middle;stroke:none;stroke-width:0;" transform="translate(100 100)"> <path style="fill:none;" stroke-width="1" stroke="blue" d="m 0,72 c 32,-16 52,-20 80,-20 28,0 48,4 80,20" transform="translate(0,-50)" id="path-upper" /> <text style="font-size:9px;" xml:space="preserve" id="t"> <textPath xlink:href="#path-upper" startOffset="50%" > <tspan x="0" dy="15" style="fill:red" id="outSpan"> abcd <tspan id="inSpan" style="fill:blue">efgh</tspan> </tspan> </textPath> </text> </g> </svg> 

Answer 2

是的，我知道，最后我写了一个方法来通过字符索引获取父元素，然后通过getComputedStyle获取父元素的计算样式
我不知道是否有任何直接的DOM方法来通过字符索引获取父元素。 如果该解决方案存在，我宁愿使用标准解决方案。

片段节目获得第7个角色的颜色样式，即“绿色”

 Element.prototype.getElementOfChar = function (index) { if (this.nodeType == 3) return this.parentNode; var childNodes = this.childNodes; if (!childNodes) return this; var insideNode = Array.prototype.find.call(childNodes, function (node) { if (index < node.textContent.length) { return true; } index -= node.textContent.length return false; }) insideNode = insideNode || this; if (insideNode.nodeType == 3) return insideNode.parentNode; return insideNode.getElementOfChar(index) } document.getElementById("log").value = `getComputedStyle(document.getElementById("grandpa").getElementOfChar(6))['color'] = ${getComputedStyle(document.getElementById("grandpa").getElementOfChar(6))['color']}` 

 <div id="grandpa" style="color:red"> abcd <div id="dad" style="color:green"> efgh <div id="son" style="color:blue"> hello </div> </div> </div> <textarea id="log" style="width:300px;height:100px"></textarea>