SVG-Bild mit einem Rahmen/Strich

Question

Ich versuche, einen Rahmen um ein Svg-Bild hinzuzufügen. Ich habe zwei Ansätze ausprobiert, aber beide gescheitert ...

Versuch 1: Zeichnet Bild, aber keine Grenze ..

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

Versuch 2: Zeichnet Bild, aber keine Grenze ..

<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;"/> 

So Meine Frage ist, ist es möglich, ein Bild auf einem SVG-Element zu definieren und gleichzeitig einen Rand/Strich um es herum zu haben?

Außerdem scheint es, dass ich Svg-Elemente mit translate und mit dem x/y-Attribut positionieren kann. Was ist bevorzugt und warum?

Answer 1

stroke gilt nicht für <image> oder <use>, nur Formen und Text. Wenn Sie einen Rahmen um ihn herum zeichnen möchten, zeichnen Sie eine <rect> nach dem Bild mit der gleichen x, y, Breite und Höhe wie das Bild und geben Sie dieser einen Strich und eine Füllung von "keine".

Um vs x/y zu übersetzen - es hängt von Ihrem Anwendungsfall ab.