SVG进阶|SVG剪裁路径
May 17, 2016 am 09:07 AM
SVG剪裁路径是指根据指定的路径或形状来剪裁SVG图形。应用了剪裁路径的SVG图形,在剪裁路径内部的图形可以被显示出来,在剪裁路径之外的图形会被隐藏。
剪裁路径的例子
下面是一个简单的SVG剪裁路径的例子:
-
-
- style="fill: #0000ff; clip-path: url(#clipPath); " />
- style="fill: #0000ff; clip-path: url(#clipPath); " />
这个例子定义了一个矩形的剪裁路径(
下面的左边图像是返回结果。右边的图像也是返回结果,但是它将剪裁路径一起显示出来了。

注意观察,只有在矩形剪裁路径内部的圆形才会被显示出来,之外的部分会被剪裁掉。
高级剪裁路径
你可以使用任何图形来作为剪裁路径。可以是圆形、椭圆、多边形或自定义路径。
在下面的例子中使用一条自定义路径来作为剪裁路径。这条剪裁路径会被应用到一个
-
-
- style="stroke: none; fill:#00ff00; clip-path: url(#clipPath3);"/>
在下面的右边的图像是返回结果,左边的图像是没有使用剪裁路径的矩形。

在组(GROUPS)中应用剪裁路径
我们可以对一组SVG图形使用剪裁路径。实现的方法是将所有的图形放到一个
-
-
-
- style="stroke: none; fill:#00ff00;"/>
在下面左边的图像是没有使用剪裁路径的图像。右边的图像是上面代码的返回结果。

文字剪裁路径
我们还可以使用文字来作为剪裁路径。使用SVG
-
This is a text
-
- style="stroke: none; fill:#00ff00;"/>
下面左边的图像没有使用剪裁路径。右边的图像使用了文字剪裁路径。

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

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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

Sujets chauds

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 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 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 glisser-déposer pour les interfaces utilisateur interactives?

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