Question

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

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

Correct Mask Circle (what I want to have)

你有建议如何制作吗？

提前致谢！

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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剪辑路径

1 个答案: