Я хочу реализовать SVG клип-путь для элемента SVG - PullRequest
Новая
       5

Я хочу реализовать SVG клип-путь для элемента SVG

0 голосов
/ 20 мая 2018

Я хочу реализовать SVG clip-path для элемента SVG.У меня есть элемент DIV, в который я хочу поместить элемент SVG, который будет действовать как обтравочную маску, а также у меня есть отдельный элемент SVG с изображением, к которому будет применена маска обрезки.

  1. Первая проблема, с которой я столкнулся, заключается в том, что обтравочная маска перемещается в левый верхний угол области просмотра, но не находится внутри родительского элемента DIV.
  2. Вторая проблема заключается в том, что я хочу сделать изображение на весь экран независимо от его размера.

Неправильный круг маски

Правильный круг маски (что я хочу иметь)

У вас есть предложения, как это сделать?

Заранее спасибо!

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>

1 Ответ

0 голосов
/ 21 мая 2018

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