как получить стиль одного персонажа внутри <tspan> - PullRequest
Новая
       36

как получить стиль одного персонажа внутри <tspan>

0 голосов
/ 13 апреля 2019

мы можем получить реакцию и позицию через 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.
Мне также нужно получить стиль одного символа:index тоже.
как и стиль get "e" в "efgh" в коде фрагмента
может ли помочь "getComputedStyle"?

Ответы [ 2 ]

1 голос
/ 13 апреля 2019

Вызовите 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>
0 голосов
/ 13 апреля 2019

да, я знаю, что, наконец, я пишу метод для получения родительского элемента по индексу символов, затем получаю вычисленный стиль родительского элемента через 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>
...