0

ブラウザに空の空白が表示されないように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>

何か案は？

4

1 に答える 1

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>

于 2016-05-03T11:01:06.773 に答える