我在SVG中做了一个表，我想动态地填充数据。这意味着我不知道文本占用了多少空间，我想剪辑或隐藏重叠文本。如何在SVG中这样做？
我的HTML文档与SVG看起来像：
<!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)"/>
<clipPath id="clip1">
<rect x="5" y="5" width="57" height="90"/>
</clipPath>
</svg>
</body>
</html>
解决方法
您可以使用
clip-path剪辑任何想要的形状，从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>