简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > H5 Tutorial > body text

SVG进阶|SVG剪裁路径

WBOY
Release： 2016-05-17 09:07:23
Original
1968 people have browsed it
1.jpg

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

　　剪裁路径的例子

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

  2.   
  3.       
  4.   



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

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

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

2.jpg

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

　　高级剪裁路径

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

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


  2.    
  3.         
  4.    



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

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

3.jpg

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

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

  2.    
  3.         
  4.    




  8.    
  9.           style="stroke: none; fill:#00ff00;"/>
  10.    
    12.         
复制代码

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

4.jpg

　　文字剪裁路径

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

  2.    
  3.         This is a text
  4.    




  8.    

  10.           style="stroke: none; fill:#00ff00;"/>
  11.                                   

复制代码

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

5.jpg

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

Related labels：
HTML5教程 HTML5中国 SVG进阶|SVG剪裁路径 html5cn html5资料 html5文章 html5内
source：php.cn
Previous article：纯js和CSS3炫酷自动幻灯片特效 Next article：SVG基础|SVG PATH 元素
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Regular expression filter for MERN stack search boxes and checkboxes I'm trying to understand how the MERN stack works together by learning by doing, and I'm f...
From 2024-04-06 14:53:12
0
1
425
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
Prestashop installation issue: Unable to install custom module I am new to Prestashop module development. I'm trying to build Amy's first prestashop modu...
From 2024-04-03 19:24:44
0
1
402
PHP Tutorial: How to upload text and images to Linkedin using PHP? I try to upload text, images and links using LinkedinsRestAPI (https://learn.microsoft.com...
From 2024-04-03 18:42:29
0
1
420
Unable to receive information from my mySQL database despite having seen tutorials doing the exact same thing So I'm trying to make a program that reads and writes to a MySQL database, which led me to...
From 2024-04-03 14:46:04
0
1
298
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！