从具有溢出内容的文本元素中获取文本仅返回文本的可见片段

时间:2018-05-22 18:54:36

标签: javascript svg svg.js

我有一个SVG,其中包含几个带有文本元素和一些文本的组。该text元素设置为与其父元素的大小相匹配,有时可能会有些小。这偶尔会导致文本元素包含的文本超出其可以容纳的范围,因此它会自然溢出。

我有一个循环遍历所有这些组来读取文本。当遇到溢出的文本元素时,它只返回可见的文本。

在下面的示例中,theTile是该组。另外,我正在使用SVG.js

// If there is a text node in the SVG, collect the details from
// the content and delete it. If there isn't, move on.
const textNode = theTile.select('text');

// Check for a text node. If it exists, collect the content
// for use in positioning for the group.
let groupCoordinates;
const textNodeCount = textNode.members.length;

if (textNodeCount) {
    const tileTextRaw = textNode.last().text();
    … do some stuff with this text …
}

tileTextRaw最终返回“name:Peristyle_5”。该文本元素内的全文实际上是“name:Peristyle_5-top:162-left:1349-width:50-height:75”

对于一个可视化的例子,这里是我试图在SVG中阅读的文本元素:

enter image description here

这是我正在使用的SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="75" viewBox="0 0 50 75">
	<title>Peristyle_5</title>
	<g id="Peristyle_5">
		<g>
			<rect id="background-2" data-name="background" width="50" height="75" fill="#7facc7"/>
		</g>
		<text transform="translate(9.726 21.76)" font-size="15" font-family="OperatorMonoSSm-Book, Operator Mono SSm">nam<tspan x="0" y="18">e:P</tspan><tspan x="0" y="36">eri</tspan></text>
	</g>
</svg>

我错过了什么?

0 个答案:

没有答案