Attribute Stroke SVG

Attribute Stroke SVG

SVG ya bayyana dukiya ceceka da yawa. A cikin babban ita, za a gudanar da haka:

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

Dukiya ceceka na yauya ceceka na gurɗe, kuma na ɗaukaka, alama ce, da sauransu yauya ceceka (tsohon gurɗe).

attsanin SVG stroke

stroke attsanin ne kanan baki na rarrabu, alama da sauransu:

ḥanin kanu 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>

Try Yourself

attsanin SVG stroke-width

stroke-width attsanin ne kanan baki na rarrabu, alama da sauransu:

ḥanin kanu 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>

Try Yourself

attsanin SVG stroke-linecap

stroke-linecap attsanin ne kanan tukuru furo nafin rarrabu:

ḥanin kanu 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>

Try Yourself

attsanin SVG stroke-dasharray

stroke-dasharray attsanin ne kanan rarrabu:

ḥanin kanu 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>

Try Yourself