Elemento immagine <image> SVG

L'elemento <image> di SVG viene utilizzato per incorporare immagini bitmap all'interno dell'immagine SVG. In questo modo, è possibile disegnare sopra o accanto all'immagine bitmap. I software di conversione di immagini SVG supportano i formati JPEG e PNG; nell'SVG, l'elemento image può anche incorporare immagini raster. Nei raster, è possibile applicare filtri, maschere, rotazioni, ritagli e tutti gli altri strumenti di SVG al contenuto.

Esempio di immagine SVG

Questo è un esempio di immagine SVG:

　　　　<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>

Effetto dell'immagine dopo l'esecuzione:

Prima di tutto, disegnare un rettangolo nero. Poi, il mio logo viene disegnato come immagine sulla parte superiore del rettangolo nero. Infine, è stato disegnato una linea bianca sia sulla mia immagine che sulla parte superiore del rettangolo nero.

L'ordine in cui gli elementi SVG sono elencati nel file è l'ordine in cui vengono disegnati. L'elemento successivo viene disegnato sopra l'elemento precedente.

Puoi anche utilizzare l'elemento <image> per incorporare altre immagini SVG. Non deve essere un'immagine bitmap.

Esempio di rotazione dell'immagine:

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

Spiegazione dell'uso:

• width e height definiscono la larghezza e l'altezza dell'immagine.

• xlink:href definisce il collegamento dell'immagine.

Ecco l'effetto finale di esecuzione: