×

SVG进阶 | SVG剪裁路径

作者:Terry2016.09.12来源:Web前端之家浏览:13117评论:0
关键词:html5SVG

SVG剪裁路径是指根据指定的路径或形状来剪裁SVG图形。应用了剪裁路径的SVG图形,在剪裁路径内部的图形可以被显示出来,在剪裁路径之外的图形会被隐藏。

600.png

剪裁路径的例子

下面是一个简单的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>中的<rect>元素)。在后面的SVG圆形中,通过style属性的clip-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);"/>

在下面的右边的图像是返回结果,左边的图像是没有使用剪裁路径的矩形。

在组(Groups)中应用剪裁路径

我们可以对一组SVG图形使用剪裁路径。实现的方法是将所有的图形放到一个<g>元素中,然后设置<g>元素的clip-pathCSS属性。下面是一个例子:

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

在下面左边的图像是没有使用剪裁路径的图像。右边的图像是上面代码的返回结果。

文字剪裁路径

我们还可以使用文字来作为剪裁路径。使用SVG <text>来作为剪裁路径的一个好处是你可以自定义字体。下面是一个简单的文字剪裁路径的例子:

<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;" />

下面左边的图像没有使用剪裁路径。右边的图像使用了文字剪裁路径。

This is a text
返回SVG教程目录
相关阅读

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/svg1473609600633.html

网友评论文明上网理性发言 已有0人参与

发表评论: