ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
 

SVGตัวอย่าง


ลองมัน Yourself ตัวอย่าง

ตัวอย่างด้านล่างฝังโค้ด SVG โดยตรงในรหัส HTML

นี้ได้รับการสนับสนุนโดย Firefox, Internet Explorer 9, Google Chrome, Opera และ Safari


ตัวอย่าง SVG

SVG พื้นฐานรูปทรง

วงกลม
สี่เหลี่ยมผืนผ้า
รูปสี่เหลี่ยมที่มีความทึบแสง
รูปสี่เหลี่ยมที่มีความทึบ 2
รูปสี่เหลี่ยมที่มีมุมโค้งมน
วงรี
สามจุดด้านบนของแต่ละอื่น ๆ
สองจุด
บรรทัด
รูปหลายเหลี่ยมที่มีสามด้าน
รูปหลายเหลี่ยมที่มีสี่ด้าน
ดวงดาว
ดาวอื่น
เส้น
อีกเส้น
เส้นทาง
กำลังสองโค้ง Bezier
เขียนข้อความ
หมุนข้อความ
ข้อความหลายบรรทัด
ข้อความเป็นลิงค์
กำหนดสีของเส้นข้อความหรือโครงร่าง (stroke)
กำหนดความกว้างของสายข้อความหรือโครงร่าง (stroke-width)
กำหนดประเภทต่าง ๆ ตอนจบเส้นทางที่เปิด (stroke-linecap)
เส้นประกำหนด (stroke-dasharray)

กรอง SVG

feGaussianBlur - ผลเบลอ
feOffset - ชดเชยสี่เหลี่ยมผืนผ้าแล้วผสมผสานเดิมด้านบนของภาพชดเชย
feOffset - ภาพเบลอชดเชย
feOffset - ให้เงาสีดำ
feOffset - รักษาเงาเป็นสี
กรอง feBlend
กรอง 1
กรอง 2
กรอง 3
กรอง 4
กรอง 5
กรอง 6

SVG การไล่ระดับสี

วงรีที่มีความลาดชันเชิงเส้นแนวนอนจากสีเหลืองเป็นสีแดง
วงรีที่มีความลาดชันเชิงเส้นในแนวตั้งจากสีเหลืองเป็นสีแดง
วงรีที่มีความลาดชันเชิงเส้นแนวนอนจากสีเหลืองเป็นสีแดงและข้อความ
วงรีที่มีการไล่ระดับสีรัศมีจากสีขาวเป็นสีฟ้า
วงรีอื่นที่มีการไล่ระดับสีรัศมีจากสีขาวเป็นสีฟ้า

SVG อื่น ๆ

สี่เหลี่ยมผืนผ้าที่ซ้ำ ๆ จางหายไปกว่า 5 วินาที
สี่เหลี่ยมเจริญเติบโตที่จะเปลี่ยนสี
สามสี่เหลี่ยมที่จะเปลี่ยนสี
ย้ายข้อความไปตามเส้นทางการเคลื่อนไหว
ย้าย, หมุน, และข้อความขนาดตามเส้นทางการเคลื่อนไหว
ย้าย, หมุน, และข้อความขนาดตามเส้นทางการเคลื่อนไหว + สี่เหลี่ยมผืนผ้าที่กำลังเติบโตที่จะเปลี่ยนสี
หมุนวงรี