Diverses façons d'insérer une page HTML dans un SVG

SVG (Graphics vectoriels évolutifs) est un format d'image vectoriel évolutif basé sur la syntaxe XML. D'autres formats d'image sont basés sur le traitement des pixels, tandis que SVG est une description de la forme de l'image, il s'agit donc essentiellement d'un fichier texte, avec une taille relativement petite et ne sera pas déformé lorsqu'il est agrandi.

Insérer les balises SVG

Utilisez la balise <svg> pour insérer directement le contenu dans la page Web, faites partie du DOM, puis vous pouvez utiliser CSS et JS pour le contrôle.

Un cercle simple:

 <svg width = 400 heihgt = 300 id = testsvg> <cercle cx = 100 cy = 100 r = 50 fill = red stroke = Black TRAD-width pour contrôler le style de SVG, mais les attributs sont différents de la bande ordinaire <style type = text / css> # #ccc;} #testsvg cercle {fill: red; Strake: bleu; largeur de course: 3; } </ style> // Vous pouvez utiliser JS pour utiliser SVG, créer des animations simples, etc. <Script Type = Text / JavaScript> var Circle = Document.getElementById (TestCircle); Circle.AddeventListener (cliquez, fonction (e) {console.log (cliquez sur Circle ...); cercle.setAttribute (R, 65);}, false); </cript> // En plus de l'utilisation de JS, vous pouvez utiliser le propre animate de SVG pour créer des effets d'animation <SVG Width = 400 Height = 300 Id = TestsVg> attributeName = cx de = 100 à = 300 dur = 2s répétitif = indéfini> </inimate> </circle> </svg>

Effet d'affichage:

Insérer le fichier SVG

Vous pouvez utiliser <img> <embed> <object> <iframe> et d'autres balises pour insérer des fichiers SVG dans les pages Web.

À l'exception de <img> , la double balise doit être utilisée.

 // Utilisez le <img> balise <img src = test.svg '/> // ou le codage de base64 de svg <img src = data: image / svg + xml; base64, [data] /> // utilise la <embed> balise <embed id = embedsvg type = image / svg + xml src = test.svg> Domvar embedsvg = document.getElementById (embedsvg) .getsvgDocument (); console.log (svg dom:, embedsvg); // utilise le <objet> tag <objet id = objetsvg type = image / svg + xml data = test.svg> document.getElementById (objetsvg) .getsvgDocument (); console.log (svg dom:, objetsvg); // utilisez le <frame> tag <iframe id = iframesvg src = test.svg> </ iframe> // Obtenir svg domvar iframesvg = document.getElementById (ifRamesVg) .ContentDocument; Console.log (SVG DOM:, ifRamesVg);

Sortie SVG DOM:

Utilisez SVG comme image d'arrière-plan pour d'autres éléments de la page Web

Il s'agit d'un moyen déguisé d'insérer SVG dans une page Web, c'est-à-dire d'utiliser SVG comme image ordinaire et ne peut pas afficher les effets d'animation.

 <style type = text / css> .svg-div {width: 400px; hauteur: 300px; arrière-plan: URL (test.svg) Center sans repaire / 50%; bordure: 1px solide #ccc;} </ style> <div class = svg-div> </div>

Effet:

Lire le code source SVG

Étant donné que le fichier SVG est essentiellement un morceau de texte XML, le code source SVG peut être lu en lisant le code XML.

 var svgstr = new xmlSerializer (). SerializetoString (document.getElementById (testsvg)); console.log (svgstr);

Résumer

C'est la fin de cet article sur les différentes façons d'insérer SVG sur les pages HTML. Pour un contenu SVG HTML plus pertinent, veuillez rechercher des articles précédents de Wulin.com ou continuer à parcourir les articles connexes ci-dessous. J'espère que tout le monde soutiendra Wulin.com à l'avenir!