SVGサークルシェイプに異なる背景画像（.png）を追加し、ストロークを設定するにはどうすればいいですか？

Question

これは私のコードである

私はalreay Add a background image (.png) to a SVG circle shape

を参照してくださいが、私の場合、私は別の画像状にストロークとストローク幅を追加する必要があります。

<svg width="700" height="660"> 
<defs> 
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1"> 
     <image x="0" y="0" xlink:href="url.png"></image> 
    </pattern> 
    <pattern id="image2" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1"> 
     <image x="0" y="0" xlink:href="url2.png"></image> 
    </pattern> 
</defs> 
<circle cx = "20%" cy = "20%" r = "20" fill = "url(#image)" stroke-width ="2px" stroke="red"/> 
<circle cx = "40%" cy = "20%" r = "20" fill = "url(#image2)" stroke-width ="2px" stroke="red"/> 
</svg> 

、これは動作しませんでした第2の円は、その塗りつぶしのための画像を持たない。

および

<svg width="700" height="660"> 
    <filter id="this_image" x="0%" y="0%" width="100%" height="100%"> 
     <feImage xlink:href="test_image.png"/> 
    </filter> 
    <circle filter="url(#this_image)" cx="180" cy="120" r="80" stroke-width ="2px" stroke="red"/> 
</svg> 

ストロークとストローク幅が無駄です

どうすればいいですか？代わりにUserSpaceOnUseでのpatternUnits属性値にObjectBoundingBoxで使用と

Answer 1

異なるアウトラインを追加します。私は別の画像（円形PS）を示したいと思います。また、xlink名前空間を宣言する必要があります。したがって、以下を使用するようにしてください： - 第二に、あなたがコードスニペットを実行した場合

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="660"> 
 
    <defs> 
 
    <pattern id="image" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1"> 
 
     <image x="0" y="0" xlink:href="https://www.gravatar.com/avatar/31497e3c546c438c4eea4b68d6f9f027?s=32&d=identicon&r=PG&f=1"></image> 
 
    </pattern> 
 
    <pattern id="image2" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1"> 
 
     <image x="0" y="0" xlink:href="https://lh5.googleusercontent.com/-x_BhuHcC8Ww/AAAAAAAAAAI/AAAAAAAAABg/hiPWIjRXbhI/photo.jpg?sz=64"></image> 
 
    </pattern> 
 
    </defs> 
 
    <circle cx = "20%" cy = "20%" r = "20" fill = "url(#image)" stroke-width ="2px" stroke="red"/> 
 
    <circle cx = "40%" cy = "20%" r = "20" fill = "url(#image2)" stroke-width ="2px" stroke="red"/> 
 
</svg>

、あなたはあなたのプロフィールアイコンが最初の円で表示され、私のしていることを、表示されます。