Mafano ya Uingilio wa SVG

Mafano ya Uingilio wa SVG

SVG ina mafuta ya kina yasiyozunguka. Katika kitabu hiki, tunatangulia kusoma kuhusu:

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

Wote za kina za mafuta yote ya kina kinaweza kutumiwa kwa aina yote ya mabara, matukio na umbo wa vipengele (kama kikuu).

Mafuta ya stroke ya SVG

stroke Mafuta inayohakikisha rangi ya mabara ya mizigo, matukio ya maandiko au elementi:

Hii ni kipindi cha 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>

Tafuta tena

Mafuta ya stroke-width ya SVG

stroke-width Mafuta inayohakikisha ukubwa wa mabara ya mizigo, matukio ya maandiko au elementi:

Hii ni kipindi cha 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>

Tafuta tena

Mafuta ya stroke-linecap ya SVG

stroke-linecap Mafuta inayohakikisha aina mbalimbali ya mizigo ya njia ya mabara ya uwanja:

Hii ni kipindi cha 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>

Tafuta tena

Mafuta ya stroke-dasharray ya SVG

stroke-dasharray Mafuta inayotumia kuzungumza mabara ya kina:

Hii ni kipindi cha 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>

Tafuta tena