Skip to content

Latest commit

 

History

History
177 lines (126 loc) · 5.67 KB

36.SVG剪裁路径.md

File metadata and controls

177 lines (126 loc) · 5.67 KB

SVG剪裁路径

SVG剪裁路径（也称为SVG剪裁）用于根据特定剪裁路径SVG形状。路径中形状部分是可见的，而外面的部分不可见。

剪裁路径示例

下面是一个简单的剪裁路径示例：

<defs>
    <clipPath id="clipPath">
        <rect x="15" y="15" width="40" height="40" />
    </clipPath>
</defs>

<circle cx="25" cy="25" r="20"
        style="fill: #0000ff; clip-path: url(#clipPath); " />

这个例子定义了一个形状像矩形（<clipPath>元素内部的形状）的剪裁路径。例子最后定义的圆通过CSS属性clip-path引用<clipPath>的id属性。

下图中，左边是最终图片，而右边是同样的图片，但是也绘制了剪裁路径。

        </rect>
    </clipPath>
</defs>

<circle cx="25" cy="25" r="20" style="fill: #0000ff; clip-path: url(#clipPath); "></circle>

        </rect>
    </clipPath>
</defs>

<circle cx="25" cy="25" r="20" style="fill: #0000ff; clip-path: url(#clipPath2); "></circle>
<rect x="15" y="15" width="40" height="40" style="stroke: #000000; fill:none;"></rect>

请注意，只有剪裁路径中的圆的部分才可见，其余的被裁剪。

高级剪裁路径

除了矩形以外，你还可以使用其它形状作为剪裁路径，如圆、椭圆、多边形或者自定义路径。任何SVG形状都可以用作剪裁路径。

下面这个例子使用<path>元素作为剪裁路径，因为这些是你可以使用的最高级的剪裁路径类型。并将它应用于<rect>元素。

<defs>
    <clipPath id="clipPath3">
        <path d="M10,10 q60,60 100,0 q50,50 50,50 l40,0 l-40,40 l-100,-20"/>
    </clipPath>
</defs>

<rect x="5" y="5" width="190" height="90"

      style="stroke: none; fill:#00ff00; clip-path: url(#clipPath3);"/>

最终图片如右下图，左侧展示的是未裁剪的图片。

<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; "></rect>

<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; clip-path: url(#clipPath3);"></rect>

分组上的剪裁路径

可以在一组SVG形状上使用剪裁路径，而不是在每个单独的形状上使用。只需将形状放在<g>元素内，并在<g>元素上设置CSS属性clip-path。示例如下：

<defs>
    <clipPath id="clipPath4">
        <rect x="10" y="20" width="100" height="20" />

    </clipPath>
</defs>

<g style="clip-path: url(#clipPath4);">
    <rect x="5" y="5" width="190" height="90"
          style="stroke: none; fill:#00ff00;"/>

    <circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;" />
</g>

下图中，左边是应用剪裁路径的图片，右侧是应用剪裁路径的图片：

<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; "></rect>
<circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle>

    </clipPath>
</defs>

<g style="clip-path: url(#clipPath4);">
    <rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00;"></rect>
    <circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle>
</g>

文本作为剪裁路径

也可以使用文本作为剪裁路径，示例如下：

<defs>
    <clipPath id="clipPath5">
        <text x="10" y="20" style="font-size: 20px; ">This is a text</text>
    </clipPath>
</defs>

<g style="clip-path: url(#clipPath5);">
    <rect x="5" y="5" width="190" height="90"

          style="stroke: none; fill:#00ff00;"/>
    <circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;" />
</g>

最终未应用和应用剪裁路径的图片如下：

<rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00; "></rect>
<circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle>
This is a text 
<g style="clip-path: url(#clipPath5);">
    <rect x="5" y="5" width="190" height="90" style="stroke: none; fill:#00ff00;"></rect>
    <circle cx="20" cy="20" r="20" style="stroke: none; fill: #ff0000;"></circle>
</g>

如你所见，现在只有文本中的形状部分可见。