>웹 프론트엔드 >H5 튜토리얼 >SVG进阶|SVG剪裁路径

SVG进阶|SVG剪裁路径

WBOY
WBOY원래의
2016-05-17 09:07:231983검색
1.jpg

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

  剪裁路径的例子

  下面是一个简单的SVG剪裁路径的例子:

  1.   
  2.       
  3.   



  4.       style="fill: #0000ff; clip-path: url(#clipPath); " />                             
复制代码

  这个例子定义了一个矩形的剪裁路径(的元素)。在后面的SVG圆形中,通过style属性的clip-path指向了这个剪裁路径。

  下面的左边图像是返回结果。右边的图像也是返回结果,但是它将剪裁路径一起显示出来了。

2.jpg

  注意观察,只有在矩形剪裁路径内部的圆形才会被显示出来,之外的部分会被剪裁掉。

  高级剪裁路径

  你可以使用任何图形来作为剪裁路径。可以是圆形、椭圆、多边形或自定义路径。

  在下面的例子中使用一条自定义路径来作为剪裁路径。这条剪裁路径会被应用到一个元素上。


  1.    
  2.         
  3.    



  4.       style="stroke: none; fill:#00ff00; clip-path: url(#clipPath3);"/>   
复制代码

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

3.jpg

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

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

  1.    
  2.         
  3.    




  4.    
  5.           style="stroke: none; fill:#00ff00;"/>
  6.    
  7.         
复制代码

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

4.jpg

  文字剪裁路径

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

  1.    
  2.         This is a text
  3.    




  4.    

  5.           style="stroke: none; fill:#00ff00;"/>
  6.                                   

复制代码

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

5.jpg

  本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/ziliaoku/ ... g/201507032160.html

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.