Verschiedene Möglichkeiten, eine HTML -Seite in einen SVG einzulegen

SVG (skalierbare Vektorgrafik) ist ein skalierbares Vektorbildformat basierend auf der XML -Syntax. Andere Bildformate basieren auf der Pixelverarbeitung, während SVG eine Beschreibung der Form des Bildes ist. Es handelt sich also im Wesentlichen um eine Textdatei mit einer relativ geringen Größe und wird bei Vergrößerung nicht verzerrt.

SVG -Tags einfügen

Verwenden Sie das <svg> -Tag, um Inhalte direkt in die Webseite einzufügen, werden Sie Teil des DOM und Sie können dann CSS und JS zur Kontrolle verwenden.

Ein einfacher Kreis:

 <svg width = 400 heihgt = 300 id = testsvg> <circle cx = 100 cy = 100 r = 50 fill = roter stroke = schwarz stroke-width = 2 id = testcircle> </circle> </svg> // kann CSS verwenden, um den Stil von SVG zu kontrollieren, aber die Attribute unterscheiden sich. solide #ccc;} #TestSvg Circle {fill: rot; Schlaganfall: Blau; Schlaganfall: 3; } </style> // Sie können JS verwenden, um SVG zu bedienen, einfache Animationen usw. zu erstellen usw. <Skript type = text/javaScript> var Circle = document.getElementById (testcircle); Circle.AdDeVentListener (klicken, function (e) {console.log (klick circle ...); circle.setAttribute (r, 65);}, false); </script> // Zusätzlich zur Verwendung von JS können Sie SVGs eigenes Animationseffekt verwenden. <Animate Attributename = CX von = 100 bis = 300 Dur = 2S RepeatCount = Indefinite> </animate> </circle> </svg>

Anzeigeffekt:

SVG -Datei einfügen

Sie können <img> <embed> <object> <iframe> und andere Tags zum Einfügen von SVG -Dateien in Webseiten verwenden.

Mit Ausnahme von <img> sollte das Doppel -Tag verwendet werden.

 // Verwenden Sie das <img> tag <img src = test.svg '/> // oder die base64 codierung von svg <img src = data: Bild/svg+xml; DOMVAR initSvg = document.getElementById (EinbredSvg) .GetSvgDocument (); console.log (SVG DOM:, Eingeweißte); // Verwenden Sie das <FOLGELN -Tag <Objekt id = ObjectSvg type = Image/svg+xml data = test Document.GetElementById (ObjectSVG) .GetSvgDocument (); Console.log (SVG DOM:, ObjectSVG); // Verwenden Sie das <Iframe> Tag <iframe id = iframesvg Src = test.svg> </iframe> // document.GetElementById (iFramesvg) .ContentDocument; console.log (SVG DOM:, IFramesvg);

SVG DOM -Ausgabe:

Verwenden Sie SVG als Hintergrundbild für andere Webseitenelemente

Dies ist eine verkleidete Möglichkeit, SVG in eine Webseite einzufügen, dh SVG als gewöhnliches Bild und keine Animationseffekte anzeigen kann.

 <style type = text/css> .svg-div {width: 400px; Höhe: 300px; Hintergrund: URL (test.svg) No-Repeat Center/50%; Rand: 1px Solid #ccc;} </style> <div class = svg-div> </div> </div>

Wirkung:

Lesen Sie den SVG -Quellcode

Da die SVG -Datei im Wesentlichen ein Stück XML -Text ist, kann der SVG -Quellcode durch Lesen des XML -Codes gelesen werden.

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

Zusammenfassen

Dies ist das Ende dieses Artikels über die verschiedenen Möglichkeiten, SVG auf HTML -Seiten einzufügen. Weitere relevante HTML -SVG -Inhalte finden Sie nach früheren Artikeln von Wulin.com oder stöbern Sie weiter unten auf den zugehörigen Artikeln. Ich hoffe, jeder wird Wulin.com in Zukunft unterstützen!