Detaillierte Einführung in SVG 2D-Striche und -Füllungen in HTML5

Bitte geben Sie die Quelle für den Nachdruck an: SVG 2D-Striche und Füllungen in HTML5

Füllfarbe – Füllattribut

Dieses Attribut verwendet die eingestellte Farbe, um das Innere der Grafik zu füllen. Es ist sehr einfach, diesem Attribut den Farbwert direkt zuzuweisen. Schauen Sie sich das Beispiel an:

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

Im obigen Beispiel wird ein Rechteck mit roten und blauen Kanten gezeichnet. Beachten Sie ein paar Punkte:

1. Wenn das Füllattribut nicht angegeben ist, wird standardmäßig die schwarze Füllung verwendet. Wenn Sie die Füllung abbrechen möchten, müssen Sie es auf „Keine“ setzen.

2. Sie können die Transparenz der Füllung einstellen, also die Füll-Deckkraft. Der Wertebereich liegt zwischen 0 und 1.

Rahmenfarbe – Strichattribut

Das Strichattribut wurde im obigen Beispiel verwendet. Dieses Attribut verwendet den eingestellten Wert, um den Rand der Grafik zu zeichnen. Hinweis:

1. Wenn das Strichattribut nicht angegeben ist, wird der Grafikrand standardmäßig nicht gezeichnet.

2. Sie können die Transparenz der Kante einstellen, d. h. die Strichopazität. Der Wertebereich liegt zwischen 0 und 1.

Eigentlich ist die Kantensituation etwas komplizierter als innerhalb des Diagramms, da die Kante neben der Farbe auch eine „Form“ hat, die definiert werden muss.

Endpunkt der Linie – Stroke-Linecap-Attribut

Dieses Attribut definiert den Stil der Endpunkte des Liniensegments. Dieses Attribut kann drei Werte verwenden: Stoß, Quadrat und Rund. Schauen Sie sich das Beispiel an:

<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>

Dieser Code zeichnet 3 Linien mit unterschiedlichen Stilen von Linienendpunkten Auf dem Bild links können wir den Unterschied zwischen den 3 Stilen leicht erkennen.

Linienverbindung – Stroke-LineJoin-Attribut

Dieses Attribut definiert den Stil der Liniensegmentverbindung. Dieses Attribut kann drei Werte verwenden: Gehrung, Rund und Abschrägung. Schauen Sie sich das Beispiel an:

<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>

Auf dem Bild links können wir den Unterschied zwischen den drei Stilen leicht erkennen.

Die Virtualität und Solidität der Linie – Stroke-Dasharray-Attribut

Mit diesem Attribut kann festgelegt werden, welche Art von gestrichelter oder durchgezogener Linie das Liniensegment verwendet. Schauen Sie sich das Beispiel an:

<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）！