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

【问题标题】：I want to implement SVG clip-path for SVG element我想为 SVG 元素实现 SVG 剪辑路径
【发布时间】：2018-10-29 23:09:58
【问题描述】：

我想为 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>

【问题讨论】：

你应该提供你所拥有的代码，至少在 codepen 或 jsfiddle 链接到它。

标签： html css svg clip-path

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

【讨论】：