Introduction détaillée aux traits et remplissages SVG 2D en HTML5

Merci d'indiquer la source de la réimpression : SVG 2D traits et remplissages en HTML5

Couleur de remplissage - attribut de remplissage

Cet attribut utilise la couleur définie pour remplir l'intérieur du graphique. Il est très simple à utiliser. Attribuez simplement la valeur de couleur à cet attribut. Regardez l'exemple :

<rect x="10" y="10" width="100" height="100" stroke="blue" fill="red"  fill-opacity="0.5" stroke-opacity="0.8"/>

Dans l'exemple ci-dessus, un rectangle avec des bords rouges et bleus est dessiné. Notez quelques points :

1. Si l'attribut fill n'est pas fourni, le remplissage noir sera utilisé par défaut. Si vous souhaitez annuler le remplissage, vous devez le définir sur aucun.

2. Vous pouvez définir la transparence du remplissage, qui est l'opacité du remplissage. La plage de valeurs est de 0 à 1.

Couleur de bordure - attribut de trait

L'attribut Stroke a été utilisé dans l'exemple ci-dessus. Cet attribut utilise la valeur définie pour dessiner la bordure du graphique. Il est également très simple à utiliser. Remarque :

1. Si l'attribut trait n'est pas fourni, la bordure graphique ne sera pas dessinée par défaut.

2. Vous pouvez définir la transparence du bord, qui est l'opacité du trait. La plage de valeurs est de 0 à 1.

En fait, la situation des bords est un peu plus compliquée qu'à l'intérieur du graphique, car en plus de la couleur, le bord a également une "forme" qui doit être définie.

Point final de la ligne - attribut Stroke-linecap

Cet attribut définit le style des extrémités du segment de ligne. Cet attribut peut utiliser trois valeurs : bout à bout, carré et rond. Regardez l'exemple :

<svg width="160" height="140"> 
  <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> 
  <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> 
  <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> 
</svg>

Ce code dessine 3 lignes en utilisant différents styles d'extrémités de ligne Sur l'image de gauche, nous pouvons facilement voir la différence entre les 3 styles.

Connexion de ligne - attribut Stroke-linejoin

Cet attribut définit le style de connexion du segment de ligne. Cet attribut peut utiliser trois valeurs : onglet, rond et biseau. Regardez l'exemple :

<svg width="160" height="280"> 
  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" 
      stroke-linecap="butt" fill="transparent" stroke-linejoin="miter"/> 
    
  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" 
      stroke-linecap="round" fill="transparent" stroke-linejoin="round"/> 
    
  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" 
      stroke-linecap="square" fill="transparent" stroke-linejoin="bevel"/> 
</svg>

Sur la photo de gauche, nous pouvons facilement voir la différence entre les 3 styles.

La virtualité et la solidité de la ligne - attribut trait-dasharray

Cet attribut peut définir le type de ligne pointillée ou continue utilisé par le segment de ligne. Regardez l'exemple :

<svg width="200" height="150"> 
  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" 
    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> 
  <path d="M 10 75 L 190 75" stroke="red" 
    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> 
</svg>

这个属性是设置一些列数字，不过这些数字必须是逗号隔开的。属性中当然可以包含空格，但是空格不作为分隔符。每个数字定义了实线段的长度，分别是按照绘制、不绘制这个顺序循环下去。所以左面的例子中绘制的线是画5单位的实线，留5单位的空格，再画5单位的实线...这样一直下去。除了这些常用的属性，还有下列属性可以设置：

stroke-miterlimit：这个和canvas中的一样，它处理什么时候画和不画线连接处的miter效果。

stroke-dashoffset：这个属性设置开始画虚线的位置。

 

使用CSS展示数据

HTML5强化了p+CSS的思想，所以展示数据的部分还可以交给CSS处理。与普通HTML元素相比，只不过是 background-color和border换成了fill和stroke。其他的大多都差不多。简单看个例子：

#MyRect:hover {  
   stroke: black;  
   fill: blue;  
 }

是不是很熟悉，就是这么简单的。

以上就是HTML5中SVG 2D笔画与填充的详细介绍的内容，更多相关内容请关注PHP中文网（www.php.cn）！