how to get the style of one character inside <tspan>

Question

we can get the react and position via SVGTextContentElement.getExtentOfChar(index)
but how to get the style of any inside typographic character

<?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)
outside tspan can get the position of character, which is in the inside tspan.
i need also get the style of one character by index too.
like the get the style of "e" in "efgh" in the snippet code
does "getComputedStyle" can help?

Answer 1

Call getComputedStyle e.g.

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

yes,i know that, finally i write a method to get the parent element by the character index,then get the parent element's computed style via getComputedStyle
i don't know is there any directly DOM methods to get the parent element by the character index. if that solution exisits, i'd prefer to use standard solution.

snippet show get the 7th character's color style,which is 'green'

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>