HTML <svg> utelezi

Mifano na matumizi

<svg> Tugri la <svg> inaeleza kama kina ya mawendo wa SVG.

SVG ina zaidi ya mabara ya kuandika mawendo, mabakasi, mvua, matexti na picha za grafu.

Kwa kuandika zaidi kuhusu SVG, tafadhali soma SVG Mafunzo。

Tazama pia:

Mwongozo wa HTML:HTML SVG

Mwongozo wa SVG:SVG Mafunzo

Mfano

Mfano 1

Kuandika mvua:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Jifunze kwa urahisi

Mfano 2

Kuandika mjuu:

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>

Jifunze kwa urahisi

Mfano 3

Kuandika mvua na mabaki yaliyomo kati:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

Jifunze kwa urahisi

Mfano 4

Kuandika nyota:

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Jifunze kwa urahisi

Mfano 5

Kuandika SVG logo:

<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
  <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
</svg>

Jifunze kwa urahisi

Mawasiliano wa barabara

Mimeno ya kati inaeleza barabara ya kwanza inayosimamia kina yafikia.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.0 3.2 10.1