IEでclipPathを非表示にする方法

Question

clipPath要素を非表示にして、ブラウザの空白の空白を表示しないようにしたいのですが、イメージのような他のsvgからも使用できるようにします。

幅0と高さ0を入力すると、IEに画像が表示されません。

display：noneを入力した場合、画像はどのブラウザーにも表示されません。

<svg height="0" width="0" viewBox="0 0 400 400"> 
 
    <defs> 
 
    <clipPath id="svgPath"> 
 
     <circle fill="#FFFFFF" cx="50%" cy="50%" r="200" /> 
 
    </clipPath> 
 
    </defs> 
 
</svg> 
 

 
<svg width="400" height="400" viewBox="0 0 400 400"> 
 
    <image xlink:href="https://farm2.staticflickr.com/1530/25831337243_d27d32ceb5_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMinYMin slice" clip-path="url(#svgPath)" /> 
 
</svg>

任意のアイデア？

Answer 1

イメージと同じSVGに入れて、隠すことはありません。

<svg width="400" height="400" viewBox="0 0 400 400"> 
 
    <defs> 
 
    <clipPath id="svgPath"> 
 
     <circle fill="#FFFFFF" cx="50%" cy="50%" r="200" /> 
 
    </clipPath> 
 
    </defs> 
 
    <image xlink:href="https://farm2.staticflickr.com/1530/25831337243_d27d32ceb5_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMinYMin slice" clip-path="url(#svgPath)" /> 
 
</svg>