วิธีต่าง ๆ ในการแทรกหน้า HTML ลงใน SVG

ใช้แท็ก <svg> เพื่อแทรกเนื้อหาลงในหน้าเว็บโดยตรงกลายเป็นส่วนหนึ่งของ DOM จากนั้นคุณสามารถใช้ CSS และ JS เพื่อควบคุมได้

วงกลมง่าย ๆ :

 <svg width = 400 heihgt = 300 id = testsvg> <circle cx = 100 cy = 100 r = 50 fill = red stroke = black stroke-width = 2 id = testcircle> </circle> </svg> // สามารถใช้ CSS เพื่อควบคุมสไตล์ของ SVG Solid #ccc;} #testsvg Circle {Fill: Red; โรคหลอดเลือดสมอง: สีน้ำเงิน; จังหวะจังหวะ: 3; } </style> // คุณสามารถใช้ JS เพื่อใช้งาน SVG สร้างภาพเคลื่อนไหวง่าย ๆ ฯลฯ <script type = text/javascript> var circle = document.getElementById (testCircle); circle.addeventListener (คลิก, ฟังก์ชั่น (e) {console.log (คลิกวงกลม ... ); circle.setAttribute (r, 65);}, false); </script> // นอกเหนือจากการใช้ JS คุณสามารถใช้ SVG ของตัวเอง <animate attributeName = cx จาก = 100 ถึง = 300 dur = 2S repefinite = indefinite> </itive> </circle> </svg>

ผลการแสดงผล:

คุณสามารถใช้ <img> <embed> <object> <iframe> และแท็กอื่น ๆ เพื่อแทรกไฟล์ SVG ลงในหน้าเว็บ

ยกเว้น <img> ควรใช้แท็กคู่

 // ใช้ <img> tag <img src = test.svg '/> // หรือการเข้ารหัส base64 ของ svg <img src = data: image/svg+xml; base64, [data]/> // ใช้ <embed> แท็ก domvar embedsvg = document.getElementById (EMBEDSVG) .getSvgDocument (); console.log (svg dom:, embedsvg); // ใช้ <object> tag <Object ID = ObjectSvg type = image/svg+xml data = test.svg document.getElementById (ObjectSvg) .getSvgDocument (); console.log (svg dom:, objectsvg); // ใช้ <iframe> แท็ก <iframe id = iframesvg src = test.svg> </iframe> document.getElementById (iframesvg) .contentDocument; console.log (svg dom :, iframesvg);

SVG DOM เอาต์พุต:

ใช้ SVG เป็นภาพพื้นหลังสำหรับองค์ประกอบหน้าเว็บอื่น ๆ

นี่เป็นวิธีที่ปลอมตัวในการแทรก SVG ลงในหน้าเว็บนั่นคือใช้ SVG เป็นภาพธรรมดาและไม่สามารถแสดงเอฟเฟกต์ภาพเคลื่อนไหวได้

 <style type = text/css> .svg-div {width: 400px; ความสูง: 300px; พื้นหลัง: url (test.svg) ศูนย์กลางที่ไม่มีการทำซ้ำ/50%; ชายแดน: 1px solid #ccc;} </style>

ผล:

เนื่องจากไฟล์ SVG เป็นส่วนหนึ่งของข้อความ XML ซอร์สโค้ด SVG สามารถอ่านได้โดยการอ่านรหัส XML

 var svgstr = ใหม่ xmlserializer (). serializetoString (document.getElementById (testsvg)); console.log (svgstr);

นี่คือจุดสิ้นสุดของบทความนี้เกี่ยวกับวิธีต่าง ๆ ในการแทรก SVG บนหน้า HTML สำหรับเนื้อหา SVG HTML ที่เกี่ยวข้องเพิ่มเติมโปรดค้นหาบทความก่อนหน้าจาก Wulin.com หรือเรียกดูบทความที่เกี่ยวข้องด้านล่าง ฉันหวังว่าทุกคนจะสนับสนุน Wulin.com ในอนาคต!