Pengenalan kepada menggunakan elemen bentuk pratakrif SVG dan SVG dalam HTML

Jika kod svg dalam html, lebih mudah untuk kita menulis javascript untuk mengawal transformasi grafik Di sini kami memperkenalkan beberapa elemen bentuk svg yang telah ditetapkan berguna kepada semua orang.

Fail SVG boleh dibenamkan dalam dokumen HTML menggunakan teg berikut: , , atau

<embed src="rect.svg" width="300"height="100" 
type="image/svg+xml" 
pluginspage="http://www.adobe.com/svg/viewer/install/"/>

pluginspage menghala ke URL untuk memuat turun pemalam.

<object data="rect.svg"width="300" height="100" 
type="image/svg+xml" 
codebase="http://www.adobe.com/svg/viewer/install/"/> 
<iframe src="rect.svg" width="300"height="100"> 
</iframe>

Antara ketiganya,

Jika kod svg dalam html, lebih mudah untuk kami menulis javascript untuk mengawal transformasi grafik:

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Berikut ialah beberapa elemen bentuk SVG yang dipratentukan:

Segi empat tepatBulatan 🎜 >Polyline

Polygon

<svg width="100%" height="100%" version="1.1" 
xmlns="http://www.w3.org/2000/svg" onclick="ccc();"> 
<ellipse cx="240" cy="100" rx="220" ry="30" 
style="fill:yellow"/> 
<ellipse cx="220" cy="100" rx="190" ry="20" id="w1" 
style="fill:white"/> 
</svg>

Path

<script type="text/javascript"> 
function ccc(){ 
var a = document.getElementById("w1"); 
a.style.fill="red"; 
a.setAttribute("cx", "150"); //设置值 
a.setAttribute("ry", "50"); //设置值 
} 
</script>

Untuk lebih banyak tutorial berkaitan, sila lawati , Tutorial video SVG

!