SVGサークルのパターンイメージはクロムのみでレンダリングされますが、なぜfirefoxとエッジはありませんか？

Question

私はsvgで円の中にイメージをレンダリングしようとしています。これはクロームでは動作しますが、他のブラウザでは動作しません。何が間違っていますか？

私は画像へのリンクを指定するいくつかの方法を挙げました.href =はchromeで動作するものです。私はこれらのどれも他の場所で働かせることはできません。塗りつぶしを＃000に変更すると、黒で塗りつぶされます - 問題はパターンにあります。

<svg width="488.20001220703125" height="469.183349609375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs> 
     <pattern id="circleimage" x="135.99766906738282" y="126.2336688232422" patternUnits="userSpaceOnUse" height="206.440673828125" 
      width="206.440673828125"> 
      <image x="0" y="0" href="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg" 
       xmlns:xlink="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg" 
       xlink="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"></image> 
     </pattern> 
    </defs> 
    <circle cx="239.21800598144532" cy="229.4540057373047" r="103.2203369140625" fill="url(#circleimage)"></circle> 
</svg> 

Answer 1

画像の高さと幅を指定する必要があります。