طرق مختلفة لإدراج صفحة 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> </cird> </svg> // يمكن أن تستخدم CSS للتحكم في نمط SVG ، لكن السمات مختلفة عن عناصر الويب المرتبطة <النموذج/css> #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 الخاص بـ SVG لإنشاء آثار الرسوم المتحركة <svg width = 400 quid = 300 id = attributeName = cx من = 100 إلى = 300 dur = 2S REPRICECOUNT = غير محدد> </animate> </cird> </svg>

تأثير العرض:

يمكنك استخدام <img> <embed> <object> <iframe> والعلامات الأخرى لإدراج ملفات SVG في صفحات الويب.

باستثناء <img> ، يجب استخدام العلامة المزدوجة.

 // استخدم علامة <img> <img src = test.svg '/> // أو ترميز base64 لـ svg <img src = data: image/svg+xml ؛ base64 ، [data]/> // استخدم <simded> tag <inmbedsvg type = image/svg+xml DOMVAR inmbedsvg = document.getElementById (inmbedsvg) .getSvGDocument () ؛ console.log (svg dom: document.getElementById (objectsvg) .getSvgDocument () ؛ console.log (svg dom: ، objectsvg) ؛ // استخدم tag <frame> <frame id = iframesvg src = test.svg> </frame> // الحصول على svg domvar iframesvg = document.getElementById (iframesvg) .ContentDocument ؛ console.log (svg dom: ، iframesvg) ؛

إخراج SVG DOM:

استخدم SVG كصورة خلفية لعناصر صفحة الويب الأخرى

هذه طريقة مقنعة لإدراج SVG في صفحة ويب ، أي استخدام SVG كصورة عادية ولا يمكن عرض تأثيرات الرسوم المتحركة.

 <type type = text/css> .svg-div {width: 400px ؛ الارتفاع: 300px ؛ الخلفية: url (test.svg) no-repeat center/50 ٪ ؛ الحدود: 1px solid #ccc ؛} </style> <div class = svg-div>

تأثير:

نظرًا لأن ملف SVG عبارة عن جزء من نص XML ، يمكن قراءة رمز مصدر SVG من خلال قراءة رمز XML.

 var svgstr = new xmlserializer (). serializetoString (document.getElementById (testSvg)) ؛ console.log (svgstr) ؛

هذه هي نهاية هذه المقالة حول الطرق المختلفة لإدراج SVG على صفحات HTML. لمزيد من محتوى HTML إدراج SVG ، يرجى البحث عن المقالات السابقة من Wulin.com أو متابعة تصفح المقالات ذات الصلة أدناه. آمل أن يدعم الجميع wulin.com في المستقبل!