Maison interface Web Tutoriel H5 SVG进阶|SVG剪裁路径

SVG进阶|SVG剪裁路径

May 17, 2016 am 09:07 AM

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

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser les balises META de la fenêtre pour contrôler la mise à l'échelle des pages sur les appareils mobiles? Comment utiliser les balises META de la fenêtre pour contrôler la mise à l'échelle des pages sur les appareils mobiles? Mar 13, 2025 pm 08:00 PM

Comment utiliser les balises META de la fenêtre pour contrôler la mise à l'échelle des pages sur les appareils mobiles?

Comment ajouter de l'audio à mon site Web HTML5? Comment ajouter de l'audio à mon site Web HTML5? Mar 10, 2025 pm 03:01 PM

Comment ajouter de l'audio à mon site Web HTML5?

Comment utiliser l'API de visibilité de la page HTML5 pour détecter quand une page est visible? Comment utiliser l'API de visibilité de la page HTML5 pour détecter quand une page est visible? Mar 13, 2025 pm 07:51 PM

Comment utiliser l'API de visibilité de la page HTML5 pour détecter quand une page est visible?

Comment utiliser les formulaires HTML5 pour la saisie de l'utilisateur? Comment utiliser les formulaires HTML5 pour la saisie de l'utilisateur? Mar 10, 2025 pm 02:59 PM

Comment utiliser les formulaires HTML5 pour la saisie de l'utilisateur?

Comment gérer la confidentialité de l'emplacement de l'utilisateur et les autorisations avec l'API Geolocation? Comment gérer la confidentialité de l'emplacement de l'utilisateur et les autorisations avec l'API Geolocation? Mar 18, 2025 pm 02:16 PM

Comment gérer la confidentialité de l'emplacement de l'utilisateur et les autorisations avec l'API Geolocation?

Comment utiliser l'API HTML5 Notifications pour afficher les notifications de bureau? Comment utiliser l'API HTML5 Notifications pour afficher les notifications de bureau? Mar 13, 2025 pm 07:57 PM

Comment utiliser l'API HTML5 Notifications pour afficher les notifications de bureau?

Comment utiliser l'API HTML5 glisser-déposer pour les interfaces utilisateur interactives? Comment utiliser l'API HTML5 glisser-déposer pour les interfaces utilisateur interactives? Mar 18, 2025 pm 02:17 PM

Comment utiliser l'API HTML5 glisser-déposer pour les interfaces utilisateur interactives?

Comment créer des jeux interactifs avec HTML5 et JavaScript? Comment créer des jeux interactifs avec HTML5 et JavaScript? Mar 10, 2025 pm 06:34 PM

Comment créer des jeux interactifs avec HTML5 et JavaScript?

See all articles