communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Tutoriel H5 > SVG基础|绘制SVG矩形

SVG基础|绘制SVG矩形

WBOY
Libérer： 2016-05-17 09:07:33
original
2343 Les gens l'ont consulté
1.jpg

　　一个元素代表一个SVG矩形。通过这个元素你可以画出不同宽度，不同高度，以及不同描边和不同填充颜色的矩形。同时它还可以绘制直角或圆角的矩形。

　　一个SVG矩形的简单例子

　　下面是一个绘制SVG矩形的简单例子。


  3.    
  4.         style="stroke:#006600; fill: #00cc00"/>

    7.       
复制代码

　　SVG矩形的位置由x和y属性决定。请记住，这个位置是相对于任何它最接近的父元素的位置。

　　SVG矩形的尺寸由width和height属性决定。

　　style属性允许你为矩形设置附加的样式，如描边色，描边宽度和填充色等。

　　下面的图形是上面代码的返回结果：

2.jpg

　　圆角矩形

　　我们也可以绘制圆角的SVG矩形。rx和ry属性用于决定矩形圆角的大小。rx属性决定圆角的宽度，ry属性则决定圆角的高度。下面的例子中，三个矩形的圆角分别被设置为5像素、10像素和15像素，请注意观察他们各自圆角的大小变化。


  3.    
  4.           rx="5" ry="5"
  5.           style="stroke:#006600; fill: #00cc00"/>
  6.    
  7.           rx="10" ry="10"
  8.           style="stroke:#006600; fill: #00cc00"/>
  9.    
  10.           rx="15" ry="15"
  11.           style="stroke:#006600; fill: #00cc00"/>
    13.    
复制代码

　　上面的代码的返回结果如下：

3.jpg

　　上面的例子中，三个圆角矩形的rx和ry值都是相同的。如果你单独设置了rx的值，那么ry的值和rx相同。这是定义SVG圆角矩形的简写方式。

　　下面的两个例子中，rx的值都设置为10像素，但是ry的值分别设置为5像素和15像素。这两个例子展示了矩形圆角的宽度和高度不相同时的情况。


  3.    
  4.           rx="10" ry="5"
  5.           style="stroke:#006600; fill: #00cc00"/>
  6.    
  7.           rx="10" ry="15"
  8.           style="stroke:#006600; fill: #00cc00"/>
    10.    
复制代码

　　上面的代码的返回结果如下：

4.jpg

　　描边矩形

　　你可以使用stroke属性来设置SVG矩形的边框属性。下面的例子设置矩形的边框为绿色，边框的宽度为3像素。
  2.       style="stroke: #009900;
  3.              stroke-width: 3;
  4.              fill: none;
  5.       "
  6.       />      
复制代码

　　上面的代码的返回结果如下：

5.jpg

　　你还可以使用stroke-dasharray属性将矩形的边框设置为虚线。看下面的例子：
  2.       style="stroke: #009900;
  3.              stroke-width: 3;
  4.              stroke-dasharray: 10 5;
  5.              fill: none;
  6.             "
  7.         />      
复制代码

　　上面的代码的返回结果如下：

6.jpg

　　填充矩形

　　你可以使用fill属性来为SVG矩形填充颜色。例如将矩形的颜色填充为none。
  2.       style="stroke: #009900;
  3.              fill: none;
  4.             "
  5.         />         
复制代码

　　这时，SVG矩形的填充色将和浏览器的页面颜色一样。

7.jpg

　　你也可以选择一种颜色来填充矩形。下面的例子将矩形填充为绿色。
  2.       style="stroke: #009900;
  3.              fill: #33ff33;
  4.             "
  5.         />     
复制代码
8.jpg
　　最后，你可以用fill-opacity属性来设置填充矩形的透明度。下面的例子中，两个句子部分叠加在一起，上面的矩形设置为50%的填充透明度。
  2.       style="stroke: #009900;
  3.          fill: #33ff33;
  4.         "
  5.         />
  7.       style="stroke: #000099;
  8.          fill: #3333ff;
  9.          fill-opacity: 0.5;
  10.         "
  11.         />            
复制代码

　　上面的代码的返回结果如下：

9.jpg

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


Étiquettes associées：
HTML5教程 HTML5中国 SVG基础|绘制SVG矩形 html5cn html5资料 html5文章 html5内
source：php.cn
Article précédent：SVG基础|SVG图形描边 Article suivant：HTML5 CANVAS：绘制阴影和填充模式
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
Derniers articles par auteur
Derniers numéros
Filtre d'expression régulière pour les champs de recherche et les cases à cocher de la pile MERN J'essaie de comprendre comment la pile MERN fonctionne ensemble en apprenant par la pratiq...
Depuis 2024-04-06 14:53:12
0
1
425
Les fichiers PDF peuvent-ils exécuter HTML5 et Javascript ? J'ai une idée stupide d'essayer de créer un programme qui ne sera bloqué sur aucun ordinat...
Depuis 2024-04-05 12:57:00
0
1
456
Problème d'installation de Prestashop : Impossible d'installer le module personnalisé Je suis nouveau dans le développement de modules Prestashop. J'essaie de créer le premier ...
Depuis 2024-04-03 19:24:44
0
1
402
Tutoriel PHP : Comment télécharger du texte et des images sur Linkedin en utilisant PHP ? J'essaie de télécharger du texte, des images et des liens à l'aide de LinkedinsRestAPI (ht...
Depuis 2024-04-03 18:42:29
0
1
420
Impossible de recevoir des informations de ma base de données MySQL malgré avoir vu des tutoriels faisant exactement la même chose J'essaie donc de créer un programme qui lit et écrit dans une base de données MySQL, ce qu...
Depuis 2024-04-03 14:46:04
0
1
298
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal