Отразить координаты пути клипа SVG? - PullRequest
Новая
       8

Отразить координаты пути клипа SVG?

0 голосов
/ 04 января 2019

У меня есть div, который обрезается с помощью элемента <clipPath> внутри SVG. Все в порядке, за исключением того, что мне нужно закрепить отрезанную часть красного div в нижнем левом углу вместо верхнего левого угла. Вот так:

Текущее

Желаемая

Когда размер окна браузера изменяется, обрезанный красный div должен прилипать к нижнему левому углу, как это происходит в настоящее время с верхним левым углом. Вот кодекс . Есть какой-либо способ сделать это? Мне нужно как-то перевернуть координатную плоскость?

Ответы [ 2 ]

0 голосов
/ 04 января 2019

«Координатный переворот» не может быть хорошим названием для того, что вы пытаетесь, так как это будет означать, что ваша траектория клипа будет инвертирована - из ваших примеров кажется, что вы хотите только перевести это.

Способ сделать это может показаться немного запутанным, но он работает: поместите элемент <svg> туда, где находится ваш обрезанный элемент div, с тем же размером. Затем вы можете воспользоваться механизмами позиционирования SVG, чтобы переместить путь относительно его размеров: сначала переместите его вверх (в отрицательном направлении y) так, чтобы его нижняя граница находилась сверху, на величину его высоты. Затем снова переместите его вниз (в положительном направлении y) на 100% от высоты <svg>.

Следующая проблема заключается в том, что вам нужно объединить абсолютный и относительный перевод. В CSS вы можете написать это как calc(100% - 33px), но здесь это не работает. Вместо этого вы сначала перемещаете путь вверх с помощью атрибута transform="translate(0,-33)", а затем ссылаетесь на него с помощью элемента <use>, который имеет то преимущество, что он имеет атрибут y для позиционирования, который может принимать значения в процентах. 

#Song2{
  top: 3.3333vh;
  right: 1.6%;    
  position: absolute;
  width: 47.6%;
  height: 16.6666vh;
  overflow: hidden;
  background-color: yellow;
} 

#Song2svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

#Song2sub{
  width: 100%;
  height: 100%;
  background-color: red;
  clip-path: url(#fltcnrCP1);
}
<div id="Song2">
  <svg id="Song2svg">
    <defs>
      <path id="cpsource" transform="translate(0,-33)" d="M0 0v18.608c0 1.032.476 2.007 1.29 2.643l14.22 11.111c.59.461 1.317.711 2.066.71h159.695V0z"/>
      <clipPath id="fltcnrCP1">
        <use href="#cpsource" y="100%" />
      </clipPath>
    </defs>
  </svg>
  <div id="Song2sub"></div>
</div>
0 голосов
/ 04 января 2019

Не могли бы вы просто повернуть красный элемент и переместить его?

...