Immagine SVG con bordo/tratto

Question

Sto provando ad aggiungere un bordo attorno a un'immagine svg. Ho provato 2 approcci ma entrambi fallito ...

Tentativo 1: Disegna immagine, ma nessun bordo ..

<image id="note-0" xlink:href="http://example.com/example.png" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"></image> 

Tentativo 2: Disegna immagine, ma nessun bordo ..

<defs> 
    <image id="image1352022098990svg" height="202" width="150" xlink:href="http://example.com/example.png"></image> 
</defs> 

<use xmlns="http://www.w3.org/2000/svg" id="note-0" xlink:href="#image1352022098990svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"/> 

Così la mia domanda è, è possibile definire un'immagine su un elemento svg e avere un bordo/tratto attorno ad esso allo stesso tempo?

Inoltre sembra di poter posizionare elementi svg con translate e con l'attributo x/y. Qual è preffered e perché?

Answer 1

stroke non si applica a <image> o <use>, solo forme e testo. Se vuoi disegnare un bordo attorno ad esso, disegna uno <rect> dopo l'immagine con la stessa x, y, larghezza e altezza dell'immagine e assegna un tratto e un riempimento di "nessuno".

Come tradurre contro x/y - dipende dal tuo caso d'uso.