如何在 IE 中隐藏 clipPath答案

【问题标题】：How to hide clipPath in IE如何在 IE 中隐藏 clipPath
【发布时间】：2016-08-28 08:48:13
【问题描述】：

我想隐藏 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>

有什么想法吗？

【问题讨论】：

把它放在与<image>相同的svg中

标签： html css internet-explorer svg clip-path

【解决方案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>

【讨论】：

但我的页面上有很多图片 svg，我不想每次都复制剪辑路径的 id 和代码。
为什么需要复制所有内容。只需选择一个 SVG，将其放入其中并在其余部分使用它。