我在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>
