javascript - 从具有溢出内容的文本元素中获取文本仅返回文本的可见段
问题描述
我有一个包含几个组的 SVG,其中包含一个文本元素和一些文本。该文本元素设置为与其父元素的大小相匹配,有时可能会有点小。这有时会导致文本元素包含的文本超出其容纳范围,因此自然会溢出。
我有一个循环遍历所有这些组来阅读文本。当遇到溢出的文本元素时,它只返回可见的文本。
在下面的示例中,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
最终返回“名称:Peristyle_5”。该文本元素内的全文实际上是“name:Peristyle_5-top:162-left:1349-width:50-height:75”</p>
对于一个视觉示例,这是我试图在 SVG 中读取的文本元素:
这是我正在使用的 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>
我错过了什么?
解决方案
推荐阅读
- arrays - Swift 多级过滤
- sql - 带有 where 子句的窗口函数(LEAD/LAG)?
- python - 如何更轻松、更正确地为索引添加附加条件以使代码更简单和覆盖?
- python - 如何将文件中的字符串保存为带引号的字符串?
- entity-framework-core - 代码优先脚手架 .net core 3.1 无法正常工作
- java - 如何在 SpringBoot 应用程序上动态忽略 LAZY 类型?
- networking - 虚拟机和主机无法通过网桥互相 ping
- python - 如何在 Alexa 游戏中创建多个用户?
- go - 如何解析 YAML 文件并从父结构创建子对象(继承)
- linux - 带有 Ansible Tower 调查的 Ansible vmware_guest 可选磁盘