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: d8e2720730be5ddc9c2a3782839e8eb6, 9b3d317d3033408e60b01f9a43e2f0b5, atau d5ba1642137c3f32f4f4493ae923989c. Atribut

<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, d5ba1642137c3f32f4f4493ae923989c ialah teg yang lebih awal dan kurang digunakan sekarang. Teg yang paling biasa digunakan ialah teg d8e2720730be5ddc9c2a3782839e8eb6 825a130302ffc3fda1c98272b6043b3f Isikan kod yang diperlukan dalam teg:

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 tepatb5f4c5ef947af4bd215358d70a50bf5bBulatan2040738eabeffa10e4925f00b5fe9218 🎜 >Polylinece803ba1a4290bddb3ba9c6f57d4c9b4

Polygon6f1cb7f8499a7e0f625f982868cbc44d

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

Path98953a78f52873edae60a617ec082494

<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

!