SVG视图框溢出:隐藏/裁剪 [英] SVG viewbox overflow: hidden / crop

问题描述

是否有办法使viewBox以外的任何内容都不可见?好像viewBox本身是overflow: hidden

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

在 jsFiddle 中，您可以看到以蓝色突出显示的viewBox.

In the jsFiddle, you can see the viewBox highlighted in blue.

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

推荐答案

您可以将矩形用作<clipPath>:

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

，然后将其应用于包含您的文本(以及您要剪切的其他任何内容)的<g>元素:

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>

由于<rect>仅用于塑造clipPath的形状，因此您必须重新绘制它:

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

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

更新了小提琴

Updated fiddle

这篇关于SVG视图框溢出:隐藏/裁剪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！