Html 如何限制或剪辑 SVG 中的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6691674/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I limit or clip text in SVG?
提问by Jonas
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中做了一个表格，我想用数据动态填充它。这意味着我不知道文本占用了多少空间，我想剪辑或隐藏重叠的文本。我怎样才能在 SVG 中做到这一点？
My HTML document with SVG looks like:
我的带有 SVG 的 HTML 文档如下所示：
<!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>
And this will render to:
这将呈现为：
Is there any way I can clip the text i my SVG-"table"?
有什么办法可以剪辑我的 SVG-“表格”中的文本？
Implemented solutionfrom Erik's answer:
从 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>
回答by Erik Dahlstr?m
You can use clip-pathto clip to whatever shape you want, see e.g masking-path-01from the svg testsuite.
您可以使用clip-path来裁剪您想要的任何形状，例如svg testsuite 中的masking-path-01。
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>
回答by Alexander Jank
If for some reason you don't want to use clipping, you can also use a nested SVG tag:
如果由于某种原因不想使用剪辑，也可以使用嵌套的 SVG 标签：
<svg>
<svg x="10" y"10" width"10" height="10">
<text x="0" y="0">Your text</text>
</svg>
</svg>
This way, your text will be cut off when it's outside the nested SVG viewport. Note that the xand yof the texttag refer to the coordinate system of the nested SVG, and correspond to 10 in the coordinate system of the outer SVG.
这样，当您的文本位于嵌套的 SVG 视口之外时，它就会被截断。注意标签的x和y是text指嵌套SVG的坐标系，对应外层SVG坐标系中的10。
回答by Edward
As Marcin said in point (2) of his answer (unfortunately downvoted but actually this is a good point) an alternative way to achieve the effect is to overpaint the part not wanted with a white rectangle.
正如 Marcin 在他的回答的第 (2) 点中所说的那样（不幸的是被否决了，但实际上这是一个好点）实现效果的另一种方法是用白色矩形覆盖不需要的部分。
<!DOCTYPE html>
<html>
<body>
<svg>
<text x="100" y="100">Orange</text>
<text x="100" y="115">Pear</text>
<text x="100" y="130">Banana</text>
<text x="100" y="145">Pomegranate</text>
<!-- Overpaint the overflowing text -->
<rect x="155" y="85" width="100" height="100" fill="white" />
<line x1="157" y1="85" x2="157" y2="155" style="stroke:rgb(100,100,100)"/>
<text x="160" y="100">12</text>
<text x="160" y="115">7</text>
<text x="160" y="130">9</text>
<text x="160" y="145">2</text>
</svg>
</body>
</html>
Reference to the SVG specification: SVG 2.0 Rendering Order
参考 SVG 规范：SVG 2.0 Rendering Order
回答by drarmstr
If you don't want to use a clip-path, which can be a pain if each element has a different size, then you can also use nested <svg>elements for clipping. Just make sure the svgelements have the CSS style overflow:hidden.
如果您不想使用 a clip-path，如果每个元素具有不同的大小，这可能会很痛苦，那么您还可以使用嵌套<svg>元素进行剪辑。只要确保svg元素具有 CSS 样式即可overflow:hidden。
<!DOCTYPE html>
<html>
<body>
<svg>
<svg width="57" height="15" x="10" y="5"><text y="15">Orange</text></svg>
<svg width="57" height="15" x="10" y="20"><text y="15">Pear</text></svg>
<svg width="57" height="15" x="10" y="35"><text y="15">Banana</text></svg>
<svg width="57" height="15" x="10" y="50"><text y="15">Pomegranate</text></svg>
<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)"/>
</svg>
</body>
</html>
回答by Marcin
(1) There is no reason to use SVG for tables. Use HTML tables.
(1) 没有理由在表格中使用 SVG。使用 HTML 表格。
(2) By "clipping" I understand you to mean that the excess text will be obscured. SVG uses a "painter's model" whereby elements specified later in the document are drawn above elements specified earlier. This will allow you to clip regions.
(2) 通过“剪裁”，我理解您的意思是多余的文本将被遮挡。SVG 使用“画家模型”，其中文档中稍后指定的元素绘制在先前指定的元素之上。这将允许您剪辑区域。
(3) If you really needed to do this in an SVG document you could use a foreign object, and embed HTML.
(3) 如果您确实需要在 SVG 文档中执行此操作，则可以使用外部对象并嵌入 HTML。
