Question

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

这将呈现给：

enter image description here

有什么方法可以剪辑我的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>

enter image description here

Answer 1

您可以使用clip-path剪裁到您想要的任何形状，请参阅svg测试套件中的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>

Answer 2

如果由于某种原因你不想使用剪辑，你也可以使用嵌套的SVG标签：

<svg>
  <svg x="10" y"10" width"10" height="10">
    <text x="0" y="0">Your text</text>
  </svg>
</svg>

这样，当文本位于嵌套的SVG视口之外时，文本将被截断。请注意，x标记的y和text是指嵌套SVG的坐标系，对应于外部SVG坐标系中的10。

Answer 3

正如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>

svg overlay sample

参考SVG规范：SVG 2.0 Rendering Order

Answer 4

如果您不想使用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>

Answer 5

（1）没有理由将SVG用于表格。使用HTML表格。

（2）通过“剪辑”，我理解你的意思是多余的文字会被遮盖。 SVG使用“画家模型”，其中文档中稍后指定的元素是在前面指定的元素之上绘制的。这将允许您剪辑区域。

（3）如果您确实需要在SVG文档中执行此操作，则可以使用外部对象，并嵌入HTML。

如何在SVG中限制或剪辑文本？

5 个答案: