有没有办法让viewBox
以外的任何东西都看不见?好像viewBox
本身就是overflow: hidden
在jsFiddle中,您可以看到以蓝色突出显示的viewBox
。
<svg width="100%" height="100%" viewBox="0 0 800 100">
<rect width="100%" height="100%" fill="none" stroke="blue" />
<text y="10" x="10%" width="10%" height="200%" fill="#000" font-size="30" >
Only the part inside the viewBox should be visible
</text>
</svg>
答案 0 :(得分:9)
您可以将矩形用作<clipPath>
:
<defs>
<rect id="rect" width="100%" height="100%" fill="none" stroke="blue" />
<clipPath id="clip">
<use xlink:href="#rect"/>
</clipPath>
</defs>
然后将其应用于包含您的文字的<g>
元素(以及您要剪辑的任何内容:
<g clip-path="url(#clip)">
<text y="10" x="10%" width="10%" height="200%" fill="#000" font-size="30">Only the part inside the viewBox should be visible</text>
</g>
由于<rect>
仅用于塑造clipPath
,因此您必须重绘它:
<use xlink:href="#rect"/>
<强> Updated fiddle 强>