如何在 IE 中隐藏 clipPath
How to hide clipPath in IE
我想隐藏 clipPath 元素,这样它就不会在浏览器中显示空白 space,但我仍然希望能够在其他 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>
有什么想法吗?
和图片放在同一个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>
我想隐藏 clipPath 元素,这样它就不会在浏览器中显示空白 space,但我仍然希望能够在其他 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>
有什么想法吗?
和图片放在同一个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>