{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 虎瘦雄心在 的问题《How can I limit or clip text in SVG?》','https://www.manongdao.com/q-513994.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have done a table in SVG, and I want to fill it with data dynamically. That means that I don't know how much space the text takes, and I want to clip or hide the overlapping text. How can I do that in SVG?
My HTML document with SVG looks like:
<!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>
And this will render to:
Is there any way I can clip the text i my SVG-"table"?
Implemented solution from Erik's answer:
<!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>
As Marcin said in point (2) of his answer (unfortunately downvoted but actually this is a good point) an alternative way to achieve the effect is to overpaint the part not wanted with a white rectangle.
Reference to the SVG specification: SVG 2.0 Rendering Order
You can use clip-path to clip to whatever shape you want, see e.g masking-path-01 from the svg testsuite.
Relevant parts, defining the clip path:
and then apply the clip path like this:
If for some reason you don't want to use clipping, you can also use a nested SVG tag:
This way, your text will be cut off when it's outside the nested SVG viewport. Note that the
xandyof thetexttag refer to the coordinate system of the nested SVG, and correspond to 10 in the coordinate system of the outer SVG.If you don't want to use a
clip-path, which can be a pain if each element has a different size, then you can also use nested<svg>elements for clipping. Just make sure thesvgelements have the CSS styleoverflow:hidden.(1) There is no reason to use SVG for tables. Use HTML tables.
(2) By "clipping" I understand you to mean that the excess text will be obscured. SVG uses a "painter's model" whereby elements specified later in the document are drawn above elements specified earlier. This will allow you to clip regions.
(3) If you really needed to do this in an SVG document you could use a foreign object, and embed HTML.