Question

我想隐藏clipPath元素，因此它不会在浏览器中显示空白空间，但我仍然希望能够从其他svgs中使用它，如图像。

如果我将宽度0和高度0放在上面，那么IE也不会显示图像。

如果我输入display：none，则图像不会显示在任何浏览器中。

＆＃13;

<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>

＆＃13;

有什么想法吗？

Answer 1

将它放在与图像相同的SVG中，没有什么可隐藏的。

＆＃13;

<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>

＆＃13;

如何在IE中隐藏clipPath

1 个答案: