SVG <image> Bild-Element

Das SVG <image>-Element wird verwendet, um Bitmapbilder in SVG-Bilder einzubetten. Auf diese Weise können Sie über oder neben dem Bitmapbild zeichnen. Software zur Konvertierung von SVG-Bildern unterstützt Formate wie JPEG und PNG; im SVG können auch beliebige Rasterbilder in das image-Element eingebettet werden. In Rasterbildern können Inhalte mit SVG-Filtern, Masken, Drehungen, Schnitten und allen anderen Werkzeugen bearbeitet werden.

SVG-Bildbeispiel

Dies ist ein Beispiel für eine SVG-Bilddatei:

　　　　<svg　width="500"　height="160">
　　　　　　　　<rect　x="10"　y="10"　height="130"　width="500"　style="fill:　#000000"></rect>
　　　　　　　　<image　x="20"　y="20"　width="300"　height="80"　xlink:href="/static/images/logo.png"></image>
　　　　</svg>
　　　　<svg>
　　　　　　　　<image　x="20"　y="20"　xlink:href="/static/images/logo.png"></image>
　　　　　　　　<line　x1="25"　y1="80"　x2="350"　y2="80"></line>
　　　　</svg>

Bildergebnis nach dem Ausführen:

Zuerst zeichnen Sie einen schwarzen Rechteck. Dann wird mein Logo als Bild auf dem oberen Rand des schwarzen Rechtecks gezeichnet. Schließlich wird eine weiße Linie auf dem oberen Rand meines Bildes und des schwarzen Rechtecks gezogen.

Die Reihenfolge, in der SVG-Elemente in der Datei aufgelistet sind, ist die Reihenfolge, in der sie gezeichnet werden. Der nächste Element wird über dem vorherigen Element gezeichnet.

Sie können auch das <image>-Element verwenden, um andere SVG-Bilder einzubetten. Es muss nicht ein Bitmap-Bild sein.

Drehen Sie das Bild, indem Sie das Bild drehen:

<svg　width="500"　height="160">
<image　x="90"　y="-65"　width="100"　height="146"　transform="rotate(45)"
　　　　　xlink:href="/static/images/logo.png"/>
</svg>

Verwendungserklärung:

• width und height definieren die Breite und Höhe des Bildes.

• xlink：href definiert den Link zum Bild.

Das endgültige Laufzeitergebnis ist wie folgt: