Properti Gaya Garis SVG

Properti Gaya Garis SVG

SVG menyediakan keadaan yang luas untuk properti pengecoran. Dalam bab ini, kita akan membincangkan hal berikut:

• stroke
• stroke-width
• stroke-linecap
• stroke-dasharray

Semua properti pengecoran boleh digunakan untuk jenis garisan, teks dan kontur elemen mana pun (seperti bulatan).

Atribut stroke SVG

stroke Atribut untuk menentukan warna garisan, teks atau elemen yang dihalasi:

Ini adalah kod SVG:

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="black" d="M5 40 l215 0" />
    <path stroke="blue" d="M5 60 l215 0" />
  </g>
</svg>

Cuba Sendiri

Atribut stroke-width SVG

stroke-width Atribut untuk menentukan ketebalan garisan, teks atau elemen yang dihalasi:

Ini adalah kod SVG:

<svg height="80" width="300">
  <g fill="none" stroke="black">
    <path stroke-width="2" d="M5 20 l215 0" />
    <path stroke-width="4" d="M5 40 l215 0" />
    <path stroke-width="6" d="M5 60 l215 0" />
  </g>
</svg>

Cuba Sendiri

Atribut stroke-linecap SVG

stroke-linecap Atribut untuk menentukan jenis titik akhir jalur terbuka:

Ini adalah kod SVG:

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

Cuba Sendiri

Atribut stroke-dasharray SVG

stroke-dasharray Atribut untuk membuat garisan berbulat:

Ini adalah kod SVG:

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

Cuba Sendiri