0

我们可以通过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)
outside tspan 可以得到字符的位置，即在 tspan 里面。
我还需要通过索引获取一个字符的样式。
就像在代码片段中的“efgh”中获取“e”的样式一样，
“getComputedStyle”可以提供帮助吗？

4

2 回答 2

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>

于 2019-04-13T08:50:49.227 回答
-1

是的，我知道，最后我写了一个通过字符索引获取父元素的方法，然后通过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>

于 2019-04-13T12:36:18.027 回答