Attribute ng Stroke ng SVG

Attribute ng Stroke ng SVG

Nagbibigay ang SVG ng malawak na katangian ng pinta. Sa kasalukuyang kabanata, ayusin natin ang sumusunod na nilalaman:

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

Lahat ng katangian ng pinta ay maaring gamitin sa anumang uri ng linya, teksto at linya ng elemento (gaya ng lupon).

SVG stroke attribute

stroke Atribute na nagtatalaga ng kulay ng linya, teksto o elemento ng linya:

Ito ang SVG code:

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

Subukan Ngayon

SVG stroke-width attribute

stroke-width Atribute na nagtatalaga ng kalalasan ng linya, teksto o elemento ng linya:

Ito ang SVG code:

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

Subukan Ngayon

SVG stroke-linecap attribute

stroke-linecap Atribute na nagtatalaga ng iba't ibang uri ng tapus ng bukas na landas:

Ito ang SVG code:

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

Subukan Ngayon

SVG stroke-dasharray attribute

stroke-dasharray Atribute na ginagawa ng lumang linya:

Ito ang SVG code:

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

Subukan Ngayon