我想为 SVG 元素实现 SVG 剪辑路径

Question

我想为 SVG 元素实现 SVG 剪辑路径。我有一个 DIV 元素，我想在其中放置将充当剪贴蒙版的 SVG 元素，而且我还有一个单独的 SVG 元素，该元素具有将应用剪贴蒙版的图像。

我遇到的第一个问题是剪贴蒙版移动到视口的左上角，但不在父 DIV 元素的内部。
第二个问题是我想在全屏上制作图像而不依赖于屏幕尺寸。

Incorrect Mask Circle

Correct Mask Circle (what I want to have)

你有什么制作方法的建议吗？

提前致谢！

html, body { margin:0; padding:0; overflow:hidden }

svg { position:absolute; top:0; left:0;}


.image-clip-src {
  width: 100%;
  height: 100%;
}

.svg-wrapper {
  width: 72px;
  height: 72px;
  padding: 2.5em;
  border: 1px solid #4D4F51;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  position: fixed;
  top: 55%;
  z-index: 9;
  left: 64%;
  transform: translateY(-50%);
  cursor: pointer;
}

.clipped-image image {
  clip-path: url(#clipping);
}

<svg class="clipped-image" width="100%" height="100%" viewBox="0 0 1440 960" preserveAspectRatio="xMinYMin meet">
      <image class="image-clip-src" xlink:href="https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=1650&q=80" width="100%" height="100%" overflow="visible"/>
</svg>

<div class="svg-wrapper">
  <svg class="svg-defs">
    <defs>
      <clipPath id="clipping">
      <circle r="72" stroke="black" stroke-width="3"/>
      </clipPath>
    </defs>
  </svg>
</div>

Answer 1

这不是 SVG 的工作方式。

当您告诉某些东西使用剪辑路径时，它所看到的只是剪辑路径定义本身。它不知道也不关心您在页面上的哪个位置放置了它的父 <svg>.

如果你想让剪辑圆在水图的某个位置，你需要使用cx和cy指定它的位置。

html, body { margin:0; padding:0; overflow:hidden }

svg { position:absolute; top:0; left:0;}


.image-clip-src {
  width: 100%;
  height: 100%;
}

.clipped-image image {
  clip-path: url(#clipping);
}

<svg class="clipped-image" width="100%" height="100%" viewBox="0 0 1440 960" preserveAspectRatio="xMinYMin meet">
  <defs>
    <clipPath id="clipping">
      <circle cx="64%" cy="55%" r="72" stroke="black" stroke-width="3"/>
    </clipPath>
  </defs>
  <image class="image-clip-src" xlink:href="https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=1650&q=80" width="100%" height="100%" overflow="visible"/>
  <circle cx="64%" cy="55%" r="72" fill="none" stroke="#4D4F51" stroke-width="1"/>
</svg>

我想为 SVG 元素实现 SVG 剪辑路径

I want to implement SVG clip-path for SVG element

html

css

svg

clip-path