Varias formas de insertar una página HTML en un SVG

SVG (gráficos vectoriales escalables) es un formato de imagen vectorial escalable basado en la sintaxis XML. Otros formatos de imagen se basan en el procesamiento de píxeles, mientras que SVG es una descripción de la forma de la imagen, por lo que es esencialmente un archivo de texto, con un tamaño relativamente pequeño y no se distorsionará cuando se amplíe.

Insertar etiquetas SVG

Use la etiqueta <svg> para insertar contenido en la página web directamente, convertirse en parte del DOM y luego puede usar CSS y JS para el control.

Un círculo simple:

 <svg width = 400 heihgt = 300 id = testSvg> <circle cx = 100 cy = 100 r = 50 relleno = rojo stroke = stroke-width = 2 id = testcircle> </circle> </svg> // puede usar CSS para controlar el estilo de svg, pero los atributos son diferentes elementos de la red de ordinarios <tipo de estilo = text/csss> # {border: 1px solid #ccc;} #testsvg circle {relleno: rojo; trazo: azul; ancho de trazo: 3; } </style> // Puede usar JS para operar SVG, crear animaciones simples, etc. <script type = text/javaScript> var circle = document.getElementById (testcircle); circle.addeventListener (haga clic, función (e) {console.log (click circle ...); circle.setattribute (r, 65);}, false); </script> // además de usar js, puede usar el propio animado de SVG para crear efectos de animación <svg width = 400 alturas = 300 id = testsVg> <circle cx = 100 cy = 100 r = 50 r = 50 r = 50 id efectos de animación <svg width = 400 alturas = 300 id = testsVg> <circle cx = 100 cy = 100 r = 50 r = 50 Id. attributename = cx from = 100 a = 300 dur = 2s repiteCount = indefinite> </imate> </circle> </svg>

Efecto de visualización:

Insertar archivo SVG

Puede usar <img> <embed> <object> <iframe> y otras etiquetas para insertar archivos SVG en páginas web.

Excepto para <img> , se debe usar la etiqueta doble.

 // use la codificación <img> <img src = test.svg '/> // o la codificación base64 de svg <img src = data: image/svg+xml; base64, [data]/> // use el <bed> etiqueta <embruje = incredsvg type = image/svg+xml src = test.svg> </embeStsvg/svg/svgg. Domvar incrUtSVG = document.getElementById (incrustsvg) .getSvgDocument (); console.log (SVG DOM :, Instituye); // Use <Object> Tag <Object ID = ObjectSVG type = Image/SVG+XML Data = test.svg> </Object> // Obtener SVG Domvar Objectsvg = document.getElementById (ObjectSVG) .getSvgDocument (); console.log (svg dom:, objectSvg); // use la etiqueta <iframe> <iframe id = iframesvg src = test.svg> </iFrame> // Obtenga SVG domvar iframesvg = document.getElementById (iframesvg) .ContentDocument; console.log (SVG DOM:, iFRamesVG);

Salida SVG DOM:

Use SVG como imagen de fondo para otros elementos de página web

Esta es una forma disfrazada de insertar SVG en una página web, es decir, use SVG como una imagen ordinaria y no puede mostrar efectos de animación.

 <style type = text/css> .svg-div {width: 400px; altura: 300px; fondo: url (test.svg) sin-repat/50%; border: 1px sólido #ccc;} </style> <div class = svg-div> </div>

Efecto:

Leer el código fuente de SVG

Debido a que el archivo SVG es esencialmente una pieza de texto XML, el código fuente SVG se puede leer leyendo el código XML.

 var svgstr = new XMLSerializer (). Serializetostring (document.getElementById (testSvg)); console.log (SVGSTR);

Resumir

Este es el final de este artículo sobre las diversas formas de insertar SVG en las páginas HTML. Para obtener un contenido SVG más relevante HTML, busque artículos anteriores de Wulin.com o continúe navegando por los artículos relacionados a continuación. ¡Espero que todos apoyen a Wulin.com en el futuro!