简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > H5-Tutorial > Hauptteil

So verwenden Sie SVG in HTML5

青灯夜游
Freigeben： 2018-12-04 10:49:14
Original
8973 Leute haben es durchsucht

In HTML5 können wir SVG-Bilder mit dem So verwenden Sie SVG in HTML5-Tag und dem

So verwenden Sie SVG in HTML5

SVG ist ein Vektorgrafikformat, das neu gezeichnet werden kann, um sich ohne Verzerrung an die Größe der Webseite anzupassen; sehr geeignet für den Einsatz im responsiven Webdesign. Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Verwendung von SVG in HTML5. Ich hoffe, er wird Ihnen hilfreich sein. [Empfohlene verwandte Video-Tutorials: HTML5-Tutorial]

Verwenden von HTML5--Tags zum Einbinden von SVG

SVG Als Teil der HTML 5-Entwurfsspezifikation ist das -Tag Teil der HTML 5-Sprache und kann inline sein. Alle großen Browsermarken (außer IE9) bieten mittlerweile eine sehr gute Unterstützung.

Hinweis:

1. Um das -Tag zu verwenden, dürfen Sie nicht vergessen, Folgendes zu deklarieren: xmlns=" innerhalb des Tag-Element. http://www.w3.org/2000/svg".

2. Dies kann nur zum Importieren von statischem SVG verwendet werden.

Unten finden Sie ein einfaches HTML5-SVG-Beispiel. 

<svg  id = "circle"  height = "200"  xmlns = "http://www.w3.org/2000/svg" > 
      <circle  id = "greencircle"  cx = "30"  cy = "30"  r = " 30"  fill = "red"  /> 
</svg>
Nach dem Login kopieren

Rendering:

So verwenden Sie SVG in HTML5

Verwenden Sie das So verwenden Sie SVG in HTML5-Tag, um SVG-Bilder zu importieren

Hinweis: Das So verwenden Sie SVG in HTML5-Tag kann nur zum Importieren statischer SVG-Bilder verwendet werden. 

<img  src = "green-circle.svg"  height = "80"  alt="漂亮的绿色圆圈" />
Nach dem Login kopieren

Rendering:

So verwenden Sie SVG in HTML5

Verwenden Sie das -Tag, um SVG-Bilder zu importieren

<object type="image/svg+xml" data="image.svg"></object>
Nach dem Login kopieren

Technisch gesehen kann das -Tag für viele Elemente verwendet werden, einschließlich SVG-Dateien, und wenn es Elemente gibt, die nicht als Bilder erkannt werden, sind sie bei der Bildsuche nicht verfügbar. Die Problemumgehung besteht darin, das So verwenden Sie SVG in HTML5-Tag als Ersatz zu verwenden:

Verwenden Sie das -Tag, um SVG-Bilder zu importieren 

<object type="image/svg+xml" data="image.svg">
    <img  src="image.svg" / alt="So verwenden Sie SVG in HTML5" >
</object>
Nach dem Login kopieren

Es wird nicht empfohlen, SVG-Bilder mit dem Tag zu importieren, der nicht Teil der HTML-Spezifikation ist, aber von allen Browsern, die hauptsächlich zur Implementierung von Flash-Plugins verwendet werden, weitgehend unterstützt wird.

Verwenden Sie das