SVG viewbox overflow: hidden / crop

Question

Is there a way to make anything outside the viewBox invisible? As if the viewBox itself were an element with overflow: hidden

Answer 1

You can use the rectangle as a <clipPath>:

<defs>
    <rect id="rect" width="100%" height="100%" fill="none" stroke="blue" />
    <clipPath id="clip">
        <use xlink:href="#rect"/>
    </clipPath>
</defs>

and then apply it to a <g> element which contains your text (and anything else you want to clip:

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

Since the <rect> was used only to shape the clipPath, you have to redraw it:

<use xlink:href="#rect"/>

Updated fiddle