ボーダー/ストローク付きSVG画像

Question

svg画像の周りに枠線を追加しようとしています。 ..だから画像が、無境界線を描画します

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

を：

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

試み2は...画像が、無境界線を描画します：

試み1 ...私は2つのアプローチを試してみましたが、両方に失敗しました私の質問は、svg要素上に画像を定義し、その周りに境界/ストロークを同時に設定できるかどうかです。

さらに、translateとx/y属性でsvg要素を配置することができます。何が優先され、なぜですか？

Answer 1

strokeは、<image>または<use>には適用されません。形状とテキストのみです。その周りに境界線を描画する場合は、画像と同じx、y、幅、高さの画像の後に<rect>を描画し、ストロークと「なし」の塗りつぶしを与えます。

vs x/yを翻訳する方法は、使用するケースによって異なります。