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

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>

解决方案

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

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