Создание адаптивного пути клипа SVG / Создание SVG <path>адаптивного - PullRequest
Новая
       11

Создание адаптивного пути клипа SVG / Создание SVG <path>адаптивного

0 голосов
/ 04 декабря 2018

Я пытаюсь создать отзывчивый путь клипа SVG, используя элемент <path> SVG.Однако у меня возникли проблемы с тем, чтобы заставить его работать.

Я заставил его работать, используя более простые формы, такие как <circle>, но не элемент <path>.Я также заставил его работать с использованием статических размеров с элементом <path>.

Я использовал инструкции здесь в качестве ссылки: https://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/. Я также рассмотрел аналогичные вопросы по StackOverflow и другим примерам,но они в основном имеют дело с базовыми фигурами, а не с переменной пути.

Используемая мной фигура SVG - это форма капли, экспортированная из Adobe Illustrator.

Вот мой код:

HTML 

<svg id="raindropSVG" viewBox="0 0 810 1012">
    <defs>
        <clipPath id="raindropClipPath" clipPathUnits="objectBoundingBox">
            <path d="M0,604.4C0,523.7,30.7,408.8,97.5,320,217,160.9,409.2,0,409.2,0S597.2,167.8,717,331c63,85.7,93,196.4,93,274,0,224.5-181.3,407-405,407S0,829.5,0,604.4Z"/>
        </clipPath>
    </defs>
</svg>

<img src="clipped-image.jpg" alt="" class="clipped-img">

CSS 

.clipped-img {
    clip-path: url(#raindropClipPath);
    width: 100%;
    height: auto;
}

#raindropSVG {
    width: 0;
    height: 0;
}

Идея состоит в том, что изменение ширины (или высоты) .clipped-img должен соответственно масштабировать форму капли.

Использование clipPathUnits="objectBoundingBox" необходимо для того, чтобы clipPath реагировал.Однако, как только я добавлю это, отсеченное изображение исчезнет.

Где я думаю, что я ошибаюсь

Я подозреваю, что путь, указанный элементом path,не в относительных единицах, однако я не знаю, как изменить единицы в относительные.

Заранее благодарим за все ответы!

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Этот ответ искажает форму пути клипа, так что он всегда охватывает все изображение, независимо от его соотношения сторон.

При clipPathUnits="objectBoundingBox" только координаты между 0 и 1 будут лежать внутри ограничительного прямоугольникавашего изображения.Вы должны уменьшить путь для этого.

К счастью, viewBox для вашего пути называет его измерения.К сожалению, вы не можете оставить вычисление масштабирования для рендерера, но должны дать преобразование напрямую: scale(1 / 810, 1 / 1012).См. ограничения для элементов содержимого <clipPath>.

И SVG 1.1, и имя спецификации SVG 2 transform в качестве возможного атрибута самого <clipPath>, нотакже не определяйте систему координат, в которой она должна применяться. Для совместимости с браузером, вероятно, лучше оставить это в покое и использовать преобразование для элемента <path>, даже если я вижу, что в Firefox нет никакой разницы врезультат. 

.clipped-img {
    clip-path: url(#raindropClipPath);
    width: 100%;
    height: auto;
}

#raindropSVG {
    width: 0;
    height: 0;

}
<svg id="raindropSVG">
    <defs>
        <clipPath id="raindropClipPath" clipPathUnits="objectBoundingBox">
            <path transform="scale(0.0012345, 0.00098814)" d="M0,604.4C0,523.7,30.7,408.8,97.5,320,217,160.9,409.2,0,409.2,0S597.2,167.8,717,331c63,85.7,93,196.4,93,274,0,224.5-181.3,407-405,407S0,829.5,0,604.4Z"/>
        </clipPath>
    </defs>
</svg>

<img src="https://i.stack.imgur.com/zubYX.png" alt="" class="clipped-img">
0 голосов
/ 04 декабря 2018

SVG всегда будет отзывчивым, если указано только viewBox.

Svg сохраняет пропорции изображения, если не указано значение `preserveAspectRatio =" none ".

Следовательно, path формирующее clip-path также будет отзывчивым.

Изображение, добавленное в SVG с использованием тега, также будет адаптивным и сохранит свои пропорции. 

#raindropSVG {
    width: 75%;
    height: 75%;
}

.clipped-img {
clip-path: url(#raindropClipPath);
}
<svg id="raindropSVG" viewBox="0 0 800 800" preserveAspectRatio="xMinYMin meet">
    <defs>
        <clipPath id="raindropClipPath" >
            <path transform="scale(0.75)" d="M0,604.4C0,523.7,30.7,408.8,97.5,320,217,160.9,409.2,0,409.2,0S597.2,167.8,717,331c63,85.7,93,196.4,93,274,0,224.5-181.3,407-405,407S0,829.5,0,604.4Z"/>
        </clipPath>
    </defs>
<image class="clipped-img" xlink:href="https://i.stack.imgur.com/zubYX.png" x="0" y="0" width="800" height="800" />
	
	</svg>
...