HTML <svg> 标签

Definisi dan penggunaan

<svg> tanda <svg> menentukan wadah grafik SVG.

SVG mempunyai banyak cara untuk lukis jalan, kotak, bulatan, teks dan imajin grafik.

Untuk belajar lebih banyak tentang SVG, baca SVG 教程。

Lihat juga：

Panduan HTML：HTML SVG

Panduan SVG：SVG 教程

Contoh

Contoh 1

Lukis bulatan：

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

亲自试一试

Contoh 2

Lukis persegi：

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

亲自试一试

Contoh 3

Lukis persegi dengan sudut rounded：

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

亲自试一试

Contoh 4

Lukis bintang：

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

亲自试一试

Contoh 5

Lukis logo SVG：

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

亲自试一试

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

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