我在SVG中做了一个表，我想动态地填充数据。这意味着我不知道文本占用了多少空间，我想剪辑或隐藏重叠文本。如何在SVG中这样做？
我的HTML文档与SVG看起来像：
@H_404_4@<!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答案的解决方案
@H_404_4@<!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)"/> <clipPath id="clip1"> <rect x="5" y="5" width="57" height="90"/> </clipPath> </svg> </body> </html>解决方法
您可以使用
clip-path剪辑任何想要的形状，从svg testsuite中看到例如
masking-path-01。
相关部分，定义剪辑路径：
@H_404_4@<clipPath id="clip1"> <rect x="200" y="10" width="60" height="100"/> ... you can have any shapes you want here ... </clipPath>然后应用剪辑路径，如下所示：
@H_404_4@<g clip-path="url(#clip1)"> ... your text elements here ... </g>