如何在SVG中限制或剪辑文本？ [英] How can I limit or clip text in SVG?
问题描述
我在SVG中做了一个表，我想用动态填充数据。这意味着我不知道文本占用了多少空间，我想要剪切或隐藏重叠的文本。如何在SVG中执行此操作？
I have done a table in SVG, and I want to fill it with data dynamically. That means that I don't know how much space the text takes, and I want to clip or hide the overlapping text. How can I do that in SVG?
我的带有SVG的HTML文档如下所示：
My HTML document with SVG looks like:
<!DOCTYPE html>
<html>
<body>
<svg>
<text x="100" y="100">Orange</text> <text x="160" y="100">12</text>
<text x="100" y="115">Pear</text> <text x="160" y="115">7</text>
<text x="100" y="130">Banana</text> <text x="160" y="130">9</text>
<text x="100" y="145">Pomegranate</text><text x="160" y="145">2</text>
<line x1="157" y1="85" x2="157" y2="155" style="stroke:rgb(100,100,100)"/>
</svg>
</body>
</html>
这将呈现给：
有什么办法吗？可以剪辑文本我的SVG-表格？
Is there any way I can clip the text i my SVG-"table"?
从Erik的答案中实施解决方案 ：
<!DOCTYPE html>
<html>
<body>
<svg>
<text x="10" y="20" clip-path="url(#clip1)">Orange</text>
<text x="10" y="35" clip-path="url(#clip1)">Pear</text>
<text x="10" y="50" clip-path="url(#clip1)">Banana</text>
<text x="10" y="65" clip-path="url(#clip1)">Pomegranate</text>
<text x="70" y="20">12</text>
<text x="70" y="35">7</text>
<text x="70" y="50">9</text>
<text x="70" y="65">2</text>
<line x1="67" y1="5" x2="67" y2="75" style="stroke:rgb(100,100,100)"/>
<clipPath id="clip1">
<rect x="5" y="5" width="57" height="90"/>
</clipPath>
</svg>
</body>
</html>
推荐答案
您可以使用 clip-path 剪辑成你想要的任何形状，参见例如 masking-path-01 。
You can use clip-path to clip to whatever shape you want, see e.g masking-path-01 from the svg testsuite.
定义剪辑路径的相关部分：
Relevant parts, defining the clip path:
<clipPath id="clip1">
<rect x="200" y="10" width="60" height="100"/>
... you can have any shapes you want here ...
</clipPath>
然后像这样应用剪辑路径：
and then apply the clip path like this:
<g clip-path="url(#clip1)">
... your text elements here ...
</g>
这篇关于如何在SVG中限制或剪辑文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
