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

我在SVG中完成了一个表格，并且我想动态地用数据填充它。这意味着我不知道文本需要多少空间，并且我想要剪切或隐藏重叠的文本。我如何在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- “表” ？

实施的解决方案从埃里克的回答是：

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

来源

2011-07-14 Jonas

你可以在上面的图片中看到它的剪辑在字母'a'的中间。更喜欢textPath而不是http://stackoverflow.com/a/9249966/592792 –

您可以使用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>

，然后应用这样的剪辑路径：他的答案（可惜downvoted的

<g clip-path="url(#clip1)"> 
    ... your text elements here ... 
</g>

来源

2011-07-14 11:00:19

有没有办法做到这一点？像所有的信息直接在剪辑路径属性中？ – Matthias

@Matthias可能可以使用数据URI，但这样会相当丑陋，我不确定这是否支持所有浏览器。然而，将来可能会直接在'clip-path'属性中使用一些简单的形状，请参阅https://dvcs.w3.org/hg/FXTF/raw-file/default/masking/index.html ＃在夹路径。 –

感谢您的回复。我对这种丑陋的data-uri方法感兴趣;）你能给我一个例子吗？正如我怀疑的 – Matthias

-1

（1）没有理由使用SVG的表。使用HTML表格。（2）通过“裁剪”我明白你的意思是多余的文字将被遮盖。 SVG使用“画家的模型”，将文档后面指定的元素绘制在上面指定的元素之上。这将允许您剪辑区域。（3）如果您确实需要在SVG文档中执行此操作，则可以使用外部对象并嵌入HTML。

来源

2011-07-14 10:26:10 Marcin

HTML只是一个预览，我将在Java Swing桌面应用程序中渲染我的SVG，所以我不能使用HTML。 – Jonas

Jonas，你确定Swing不会呈现嵌入式HTML吗？无论如何，我相信我已经回答了你关于裁剪的问题。 – Marcin

Swing对HTML的支持非常有限，例如桌子上没有圆角。我无法在IE9中使用'foreignObject'。我会尝试更多有关裁剪区域的内容，但如此胖乎乎的运气。你有任何示例代码？ – Jonas

如马辛在说点（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

来源

2014-08-31 10:58:02 Edward

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

来源

2016-03-18 16:57:54 drarmstr

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

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

这样，你的文字将被切断时，它的外面嵌套SVG视口。请注意，text标记的x和y表示嵌套SVG的坐标系，对应于外SVG坐标系中的10。

来源

2017-03-05 11:56:54

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

回答

相关问题