Html 如何限制或剪辑SVG中的文本？_Html_Svg

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

html svg

Html 如何限制或剪辑SVG中的文本？,html,svg,Html,Svg,我已经用SVG做了一个表，我想动态地用数据填充它。这意味着我不知道文本占用了多少空间，我想剪辑或隐藏重叠的文本。如何在SVG中实现这一点我的带有SVG的HTML文档如下所示： <!DOCTYPE html> <html> <body> <svg> <text x="100" y="100">Orange</text> <text x="160" y="100">12</text> <t

我已经用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>


橙色12
梨7
香蕉9
石榴2

这将导致：

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


橙色
梨
香蕉
石榴
12
7.
9
2.

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

（2）我理解你所说的“剪辑”是指多余的文本将被模糊。SVG使用“画师模型”，文档后面指定的元素在前面指定的元素之上绘制。这将允许您剪裁区域

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

您可以使用来剪裁成您想要的任何形状，请参见SVG测试套件中的示例

定义剪辑路径的相关零件：

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


... 您的文本元素在这里。。。

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


橙色
梨
香蕉
石榴
12
7.
9
2.

参考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>


橙色
梨
香蕉
石榴
12
7.
9
2.

如果出于某种原因您不想使用剪裁，也可以使用嵌套的SVG标记：

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


你的文字

这样，当文本位于嵌套的SVG视口之外时，它将被截断。请注意，

text

标记的

和

引用嵌套SVG的坐标系，并对应于外部SVG坐标系中的10。

HTML只是预览，我也将在Java Swing桌面应用程序中呈现我的SVG，因此我不能使用HTML.Jonas，您确定Swing不会呈现嵌入的HTML吗？无论如何，我相信我已经回答了你关于剪辑的问题。Swing对HTML的支持非常有限，例如桌子上没有圆角。我无法在IE9中使用

foreignObject

。我将尝试更多关于剪裁区域的内容，但太胖了，运气不好。你有任何示例代码吗？@Jacek谢谢。我只能想象这是对SVG工作原理的无知。这里的社区有点奇怪。有时有用，有时没头脑。这是彩票；）。顺致敬意，有没有一种方法可以在线完成这项工作？就像将所有信息直接放在clip path属性中一样？@Matthias可能会使用数据URI，但这会非常难看，我不确定所有浏览器是否都支持。不过，将来可能会直接在

剪辑路径

属性中使用一些简单形状，请参见。感谢您的回复。我对这种丑陋的数据uri方法感兴趣；）你能给我举个例子吗？正如我所怀疑的，这里有一个例子：这可以夹在一封信的中间。对于文本，您可以在上面的图片中看到TeXPATH，它在字母“代码> A/<代码>的中间剪辑。更喜欢文本路径