SVG ใน HTML
คุณสามารถฝังองค์ประกอบ SVG ลงในหน้า HTML ของคุณได้โดยตรง
ฝัง SVG ลงในหน้า HTML โดยตรง
นี่คือตัวอย่างกราฟิก SVG อย่างง่าย:
และนี่คือรหัส HTML:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
คำอธิบายรหัส SVG:
- รูปภาพ SVG เริ่มต้นด้วย <svg> องค์ประกอบ
- แอตทริบิวต์ width และ height ขององค์ประกอบ <svg> กำหนดความกว้างและความสูงของรูปภาพ SVG
- <circle> องค์ประกอบที่ใช้ในการวาดวงกลม
- คุณลักษณะ cx และ cy กำหนดพิกัด x และ y ของจุดศูนย์กลางของวงกลม หากไม่ได้ตั้งค่า cx และ cy จุดศูนย์กลางของวงกลมจะถูกตั้งค่าเป็น (0, 0)
- แอตทริบิวต์ r กำหนดรัศมีของวงกลม
- คุณลักษณะเส้นขีดและความกว้างเส้นขีดควบคุมลักษณะที่เค้าร่างของรูปร่างปรากฏ เรากำหนดโครงร่างของวงกลมเป็น "เส้นขอบ" สีเขียว 4px
- แอตทริบิวต์เติมหมายถึงสีภายในวงกลม เราตั้งค่าสีเติมเป็นสีเหลือง
- แท็กปิด </svg> ปิดอิมเมจ SVG
หมายเหตุ:เนื่องจาก SVG เขียนด้วย XML องค์ประกอบทั้งหมดจะต้องปิดอย่างถูกต้อง!