SVG => Linia

Parametry

Atrybut	Opis
x1	Pozioma pozycja początku linii.
y1	Pionowa pozycja początku linii.
x2	Pozioma pozycja końca linii.
y2	Pionowe położenie końca linii.
uderzenie	Kolor linii.
szerokość skoku	Szerokość linii.
udarność krycia	Krycie linii.
stroke-dasharray	Wzór kreskowania dla linii
obrys-linek	Jak renderowane są zakończenia linii

Uwagi

Szczegółowe informacje na temat elementu „linii” SVG można znaleźć w Zaleceniu W3C dla SVG .

Narysuj krzyż, używając ukośnych czerwonych linii

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <line x1="10" y1="10" x2="100" y2="100" stroke="red" stroke-width="10" />
    <line x1="100" y1="10" x2="10" y2="100" stroke="red" stroke-width="10" />
</svg>

Wynik:

Rysowanie linii przerywanej za pomocą obrysu-kreski

<svg width="400px" height="400px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <line x1="10" y1="10" x2="300" y2="10" stroke="red" stroke-width="10" stroke-dasharray="20,2,5,2"/>
</svg>

Wynik

Różne przykłady obrysu deski rozdzielczej:

<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
  <line stroke-dasharray="5, 5"              x1="10" y1="10" x2="190" y2="10" />
  <line stroke-dasharray="5, 10"             x1="10" y1="30" x2="190" y2="30" />
    <line stroke-dasharray="10, 5"             x1="10" y1="50" x2="190" y2="50" />
    <line stroke-dasharray="5, 1"              x1="10" y1="70" x2="190" y2="70" />
    <line stroke-dasharray="1, 5"              x1="10" y1="90" x2="190" y2="90" />
    <line stroke-dasharray="0.9"               x1="10" y1="110" x2="190" y2="110" />
    <line stroke-dasharray="15, 10, 5"         x1="10" y1="130" x2="190" y2="130" />
    <line stroke-dasharray="15, 10, 5, 10"     x1="10" y1="150" x2="190" y2="150" />
    <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />
    <line stroke-dasharray="5, 5, 1, 5"        x1="10" y1="190" x2="190" y2="190" />
    <style><![CDATA[
    line{
        stroke: red;
        stroke-width: 2;
    }
    ]]></style>
 </svg>

Wynik:

Alternatywne zakończenia linii za pomocą obrysu

<svg width="600px" height="400px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  
    <line x1="10" y1="20" x2="300" y2="20" stroke="red" stroke-width="20" stroke-linecap="butt"/>
      <text x="320" y="20">stroke-linecap="butt" (default)</text>
    <line x1="10" y1="70" x2="300" y2="70" stroke="red" stroke-width="20" stroke-linecap="round"/>
      <text x="320" y="70">stroke-linecap="round"</text>
    <line x1="10" y1="120" x2="300" y2="120" stroke="red" stroke-width="20" stroke-linecap="square"/>
      <text x="320" y="120">stroke-linecap="square"</text>
</svg>

Wynik

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

SVG
Linia

Szukaj…