如何在SVG中限制或剪辑文本？
我在SVG中做了一个表,我想用动态填充数据.这意味着我不知道文本占用了多少空间,我想要剪切或隐藏重叠的文本.我怎么能在SVG中做到这一点？
我的带有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>
这将呈现给:
有什么方法可以剪辑我的SVG-"桌子"的文字吗？
从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>
Eri*_*röm 36
您可以使用剪辑路径剪辑到您想要的任何形状,例如参见svg testsuite中的masking-path-01.
定义剪辑路径的相关部分:
<clipPath id="clip1">
<rect x="200" y="10" width="60" height="100"/>
... you can have any shapes you want here ...
</clipPath>
然后像这样应用剪辑路径:
<g clip-path="url(#clip1)">
... your text elements here ...
</g>
- 有没有办法内联？就像直接在clip-path属性中拥有所有信息一样？ (8认同)
如果由于某种原因您不想使用裁剪，您还可以使用嵌套的 SVG 标签：
<svg>
<svg x="10" y="10" width="10" height="10">
<text x="0" y="0">Your text</text>
</svg>
</svg>
这样，当文本位于嵌套 SVG 视口之外时，文本将被截断。请注意，标签的x和指的是嵌套 SVG 的坐标系，对应于外部 SVG 坐标系中的 10。ytext
| 归档时间： |
|
| 查看次数： |
19966 次 |
| 最近记录： |