Question

我们可以通过 SVGTextContentElement.getExtentOfChar（index）获得反应和位置
但是如何获得任何内部印刷字符的样式

<?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

else
        {
            JSONObject jsonObject = new JSONObject(s);

            Intent intent = new Intent(context,RestaurantFoodItemActivity.class);
            intent.putExtra("restaurant_names",jsonObject .toString());
            context.startActivity(intent);
        }

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

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>

如何在<tspan>中获得一个字符的样式

2 个答案: