Изменение размера пути клипа Svg в соответствии с областью просмотра

Я борюсь с изменением размера обрезанного svg в моей настройке HTML. Я искал похожие решения, но пока не нашел. Я пытаюсь изменить размер обрезанного svg в соответствии с вертикальным окном просмотра экрана. Вот пример codepen моей настройки:

.slider-image {
  clip-path: url(#clip);
  -webkit-clip-path: url(#clip);
}

<div>
  <img class = "w-full h-full slider-image object-cover absolute top-0 left-0 z-20" src = "https://images.unsplash.com/photo-1558611848-73f7eb4001a1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80" >
  <svg width = "100%" height = "90vh" viewBox = "0 0 1159 548" xmlns = "http://www.w3.org/2000/svg">
    <defs>
      <clipPath id = "clip">
        <path d = "M989 547.5H0V0H1156L1159 9L1157.5 18.5L1147 89.5L1157.5 126L1120 244.5L1088 309L1041 369.5L989 445.5L962 503.5L989 547.5Z" fill = "url(#paint0_linear)"/>
        <circle cx = "350" cy = "168" r = "80"/>
      </clipPath>
    </defs>
  </svg>                
</div>

https://codepen.io/ilkrclm/pen/oNNMQor?editors=1100

svg clip-path

26.12.2020 15:25

Создание фильтров для вашего сайта

Фильтры - удобный инструмент в арсенале веб-дизайнера. Они позволяют изменять элементы на странице с помощью всего нескольких строк кода. Эти...

Анимация SVG-узоров без единой строки CSS

Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...

Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?

D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...

272

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В этом случае решение использует clipPathUnits = "objectBoundingBox"

Атрибут clipPathUnits указывает, какую систему координат использовать для содержимого элемента <clipPath>.

objectBoundingBox указывает, что все координаты внутри элемента <clipPath> относятся к ограничивающей рамке элемента, к которому применяется обтравочный контур. Это означает, что начало системы координат находится в верхнем левом углу ограничивающей рамки объекта, а ширина и высота ограничивающей рамки объекта считаются имеющими длину, равную 1 единичному значению.

Читайте о clipPathUnits

Поскольку считается, что ограничивающая рамка объекта имеет длину 1 единицу, вам необходимо масштабировать путь: transform = "scale(0.00086)". Ширина ограничивающей рамки пути равна 1159. 1/1159 = 0,00086.

Я закомментировал круг, так как в этом случае он ничего не делает.

*{margin:0;padding:0}
.slider-image {
  width:100%;
  clip-path: url(#clip);
  -webkit-clip-path: url(#clip);
}

<div>
  <img class = "w-full h-full slider-image object-cover absolute top-0 left-0 z-20" src = "https://images.unsplash.com/photo-1558611848-73f7eb4001a1?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1051&q=80" >
  <svg xmlns = "http://www.w3.org/2000/svg">
    <defs>
      <clipPath id = "clip" clipPathUnits = "objectBoundingBox">
        <path transform = "scale(0.00086)" d = "M989 547.5H0V0H1156L1159 9L1157.5 18.5L1147 89.5L1157.5 126L1120 244.5L1088 309L1041 369.5L989 445.5L962 503.5L989 547.5Z" fill = "url(#paint0_linear)"/>
        <!--<circle transform = "scale(0.00086)" cx = "350" cy = "168" r = "80"/>-->
      </clipPath>
    </defs>
  </svg>                
</div>

Спасибо за подробную информацию о решении. Очень ценится. Для вертикального масштабирования я изменил преобразование на «масштаб (0,00086, 0,001824)». Теперь это работает как шарм.

— 26.12.2020 17:55

26.12.2020 17:09