Как сделать так, чтобы мой clipPath покрывал все мое изображение? - PullRequest
Новая
       68

Как сделать так, чтобы мой clipPath покрывал все мое изображение?

0 голосов
/ 04 марта 2020

Я столкнулся со спокойной стеной, пытаясь что-то сделать с путями клипов, поэтому я объясню с самого начала.

У меня есть SVG-путь, который имеет следующую форму:

Path I will use for clipping.

Я хочу использовать форму этого SVG (путь), чтобы обрезать изображение, я хочу, чтобы это изображение было 100% ширины родительского контейнера, который как широкий как браузер. В конце я хочу, чтобы мое изображение было обрезано так: Clipped image + path

Код элемента svg выглядит следующим образом (я не думаю, что это очень актуально, но я делаю это в React, href изображения работает.): 

<svg
    xmlns="http://www.w3.org/2000/svg"
    data-name="Laag 1"
    viewBox="0 0 81.09 63.08"
    width="0"
    height="0"
    className="statement-block__background-image-container__mask">
    <defs>
        <clipPath id="statement-block__background-image-container__mask__path" clipPathUnits="objectBoundingBox">
            <path fill="#398245" d="M0 21.39v41.69A137.91 137.91 0 0081.09 29.5L51.6 0C45.53 5 16.62 19.73 0 21.39z"></path>
        </clipPath>

    </defs>

    <image viewBox="0 0 100 100" className="statement-block__background-image-container__mask__image" href={backgroundImage} clip-path="url(#statement-block__background-image-container__mask__path)" preserveAspectRatio="none"></image>
  </svg>

Мне удалось стилизовать SVG (с классом «Statement-block__background-image-container__mask») до 100% ширины его родителя. Однако путь, который он содержит, не заполняет всю ширину svg, даже когда я задаю ему ширину 100%.

Я прочитал некоторые вещи о необходимости использовать clipPathUnits = "objectBoundingBox", однако у меня возникли некоторые проблемы с его использованием.

  • Если я добавлю clipPathUnits = "objectBoundingBox" на свой clipPath, я больше не смогу видеть изображение, я не знаю почему.

  • Если я не вставлю clipPathUnits = "objectBoundingBox" в мой clipPath, я смогу увидеть изображение

В последнем случае это выглядело бы как то так, где svg имеет фон белого цвета, а тело имеет красный фон ound: Clipped Image

Как мне сделать так, чтобы путь и изображение занимали всю ширину svg (с белым фоном), и, возможно, даже больше (как я хотите, чтобы верхняя часть переполнилась)?

...