ความคิดเห็น: หากรหัส SVG อยู่ใน HTML มันจะง่ายกว่าที่เราจะเขียน JavaScript เพื่อควบคุมการแปลงกราฟ นี่คือองค์ประกอบรูปร่างที่กำหนดไว้ล่วงหน้าของ SVG เพื่อนที่สนใจสามารถอ้างถึงได้ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ
ไฟล์ SVG สามารถฝังอยู่ในเอกสาร HTML ผ่านแท็กต่อไปนี้: <embed>, <pject>, หรือ <ferame><ฝัง src = "rect.svg" ความสูง = "100"
type = "image/svg+xml"
pluginspage = "http://www.adobe.com/svg/viewer/install/"/>
Pluginspage Property ชี้ไปที่ URL ของปลั๊กอินดาวน์โหลด
<object data = "rect.svg" width = "300"
type = "image/svg+xml"
codebase = "http://www.adobe.com/svg/viewer/install/"/>
<iframe src = "rect.svg" ความสูง = "100">
</iframe>
ในบรรดา <iframe> ทั้งสามนี้เป็นแท็กแรกและตอนนี้มันถูกใช้น้อยลง สิ่งที่ใช้มากขึ้นคือแท็ก <Embed>
ในเวลาเดียวกันเรายังสามารถเขียน SVG ลงในไฟล์ HTML ได้โดยตรง:
ด้วยวิธีนี้คุณต้องแนะนำไฟล์ SVG DTD ก่อน:
<? xml version = "1.0" standalone = "ไม่"?>
<! doctype svg public "-// w3c // dtd svg 1.1 // en"
"http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd">
จากนั้นกรอกรหัสที่ต้องการในแท็ก <svg>:
<svg version = "1.1"
xmlns = "http://www.w3.org/2000/svg">
<ellipse cx = "240" Cy = "100" rx = "220" ry = "30"
Style = "Fill: Yellow"/>
<Ellipse cx = "220" Cy = "100" Rx = "190" ry = "20"
Style = "Fill: White"/>
</svg>
หากรหัส SVG อยู่ใน HTML มันจะง่ายกว่าที่เราจะเขียน JavaScript เพื่อควบคุมการแปลงกราฟ:
<script type = "text/javascript">
ฟังก์ชั่น ccc () {
var a = document.getElementById ("W1");
a.style.fill = "สีแดง";
A.SetAttribute ("CX", "150"); // ตั้งค่า
A.SetAttribute ("ry", "50"); // ตั้งค่า
-
</script>
นี่คือองค์ประกอบรูปร่างที่กำหนดไว้ล่วงหน้าสำหรับ SVG:
สี่เหลี่ยมผืนผ้า <rect>
วงกลม <Circle>
วงรี <Ellipse>
บรรทัด <Line>
Polyline <Polyline>
รูปหลายเหลี่ยม <Polygon>
Path <Ath>