Как вставить картинку в шестиугольник svg?
У меня есть кастомная рамка - шестиугольник, и я хочу вставить В него картинку, но она просто на него накладывается сверху.
<svg width="70" height="64" viewBox="0 0 70 64" fill="none" xmlns="http://www.w3.org/2000/svg" >
<g filter="url(#filter0_d)">
<path d="M21.433 55.4987L7.86603 32L21.433 8.50129H48.567L62.134 32L48.567 55.4987H21.433Z" stroke="url(#paint0_linear)" stroke-width="1.5" />
</g>
<defs>
<filter id="filter0_d" x="0" y="0.751282" width="70" height="62.4974" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="3.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.980392 0 0 0 0 0.760784 0 0 0 0 0.0745098 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="33.7826" y1="57.1282" x2="33.7826" y2="4" gradientUnits="userSpaceOnUse">
<stop stop-color="#F4AC26"/>
<stop offset="1" stop-color="#FDCB0C"/>
</linearGradient>
</defs>
</svg>Ответы (2 шт):
Автор решения: Alexandr_TT
→ Ссылка
Изображение можно вставить в любую рамку с помощью:
- clipPath
- mask
- pattern
#1. clipPath
Изображение добавляется в SVG с помощью тега - image
И обрезается с помощью clipPath по форме шестиугольника, заданной в path секции defs
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 200 174.284" >
<defs>
<!-- Форма шестиугольника по которой будет обрезано изображение -->
<clipPath id="cp">
<path fill="none" stroke="black" stroke-width="2" d="M139.854 14.087H60.146A4.024 4.024 0 0056.66 16.1L16.806 85.129a4.025 4.025 0 000 4.025l39.854 69.03a4.026 4.026 0 003.486 2.012h79.708a4.026 4.026 0 003.486-2.012l39.854-69.03a4.025 4.025 0 000-4.025L143.34 16.1a4.024 4.024 0 00-3.486-2.013z"/>
</clipPath>
</defs>
<!-- Добавление изображения в SVG -->
<g clip-path="url(#cp)">
<image width="100%" height="100%" x="0" y="0" xlink:href="https://picsum.photos/id/686/800/800" />
</g>
<!-- Внешняя Рамка, при необходимости можно удалить -->
<path fill="none" stroke="#989064" stroke-width="4" d="M139.854 14.087H60.146A4.024 4.024 0 0056.66 16.1L16.806 85.129a4.025 4.025 0 000 4.025l39.854 69.03a4.026 4.026 0 003.486 2.012h79.708a4.026 4.026 0 003.486-2.012l39.854-69.03a4.025 4.025 0 000-4.025L143.34 16.1a4.024 4.024 0 00-3.486-2.013z"/>
</svg>#2. mask
Более функциональный вариант, при котором возможны многочисленный варианты обработки изображения:
- Вырезать изображение по форме шестиугольника при path
fill="white" - Сделать изображение полупрозрачным при выборе заливки маски промежуточного значения от белого до чёрного цвета
- Убрать, добавить рамку, сделать её полупрозрачной
Ниже пример с вырезкой изображения fill="white" и полупрозрачной рамкой stroke="red" stroke-width="6"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 200 174.284" >
<defs>
<!-- fill="white" Форма шестиугольника по которой будет вырезано изображение -->
<!-- Рамка сделана полупрозрачной stroke="red" stroke-width="6" -->
<mask id="msk">
<path fill="white" stroke="red" stroke-width="6" d="M139.854 14.087H60.146A4.024 4.024 0 0056.66 16.1L16.806 85.129a4.025 4.025 0 000 4.025l39.854 69.03a4.026 4.026 0 003.486 2.012h79.708a4.026 4.026 0 003.486-2.012l39.854-69.03a4.025 4.025 0 000-4.025L143.34 16.1a4.024 4.024 0 00-3.486-2.013z"/>
</mask>
</defs>
<!-- Добавление изображения в SVG -->
<g mask="url(#msk)">
<image width="100%" height="100%" x="0" y="0" xlink:href="https://picsum.photos/id/686/800/800" />
</g>
</svg>#3. pattern
При этом варианте изображение загружается в pattern секции defs, а затем паттерном заполняется фигура svg - <path fill="url(#img1)"
В примере ниже одним и тем же изображением заполняются квадрат, окружность, треугольник
<!-- http://www.boogdesign.com/examples/svg/path-pattern-fill.svg -->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="450" viewBox="0 0 600 450" >
<title>Заполнение изображения в разные формы SVG</title>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="450">
<image xlink:href="https://i.stack.imgur.com/pFlxC.jpg" x="0" y="0"
width="600" height="450" />
</pattern>
</defs>
<path d="M5,50
l0,100 l100,0 l0,-100 l-100,0
M215,100
a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
M265,50
l50,100 l-100,0 l50,-100
z"
fill="url(#img1)" />
</svg>
Автор решения: Alexandr_TT
→ Ссылка
Вопрос изменен после появления первого ответа. Поэтому новый ответ.
К шестиугольнику применены сложные фильтры, градиенты, но это не помешает добавить к нему изображение по 3 варианту с паттернами.
<defs>
<!-- Добавляем изображение к шестиугольнику fill="url(#img1)"> -->
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://i.stack.imgur.com/pFlxC.jpg" x="0" y="0"
width="600" height="450" />
</pattern>
</defs>
<svg width="70" height="64" viewBox="0 0 70 64" fill="none" xmlns="http://www.w3.org/2000/svg" >
<g id="path1" filter="url(#filter0_d)" fill="url(#img1)">
<path d="M21.433 55.4987L7.86603 32L21.433 8.50129H48.567L62.134 32L48.567 55.4987H21.433Z" stroke="url(#paint0_linear)" stroke-width="1.5" />
</g>
<defs>
<filter id="filter0_d" x="0" y="0.751282" width="70" height="62.4974" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="3.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.980392 0 0 0 0 0.760784 0 0 0 0 0.0745098 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="33.7826" y1="57.1282" x2="33.7826" y2="4" gradientUnits="userSpaceOnUse">
<stop stop-color="#F4AC26"/>
<stop offset="1" stop-color="#FDCB0C"/>
</linearGradient>
<pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="450">
<image xlink:href="https://i.stack.imgur.com/pFlxC.jpg" x="0" y="0"
width="600" height="450" />
</pattern>
</defs>
</svg>Следующий пример адаптивен к любому гаджету и добавлено изменение внешнего вида шестиугольника при наведении мыши
Для адаптивности убираем из шапки SVG
width,heightОборачиваем svg в родительский div и задаем ему размеры в относительных единицах
Для изменения внешнего вида шестиугольника анимируем у фильтра feflood атрибут flood-opacity="0.15"
<!-- Анимация цвета фона при наведении -->
<feFlood flood-opacity="0.15" result="BackgroundImageFix" >
<animate attributeName="flood-opacity" begin="svg1.mouseover" dur="0.3s"
to="0.75" fill="freeze" end="svg1.mouseout" />
</feFlood>
<style>
.container {
width:15vw;
height:auto;
}
</style>
<div class="container">
<svg id="svg1" viewBox="0 0 70 64" fill="none" xmlns="http://www.w3.org/2000/svg" >
<!-- Добавляем изображение к шестиугольнику -->
<g id="path1" filter="url(#filter0_d)" fill="url(#img1)">
<path d="M21.433 55.4987L7.86603 32L21.433 8.50129H48.567L62.134 32L48.567 55.4987H21.433Z" stroke="url(#paint0_linear)" stroke-width="1.5" />
</g>
<defs>
<filter id="filter0_d" x="0" y="0.751282" width="70" height="62.4974" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<!-- Анимация цвета фона при наведении -->
<feFlood flood-opacity="0.15" result="BackgroundImageFix" >
<animate attributeName="flood-opacity" begin="svg1.mouseover" dur="0.3s" to="0.75" fill="freeze" end="svg1.mouseout" />
</feFlood>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset/>
<feGaussianBlur stdDeviation="6"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.980392 0 0 0 0 0.760784 0 0 0 0 0.0745098 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="33.7826" y1="57.1282" x2="33.7826" y2="4" gradientUnits="userSpaceOnUse">
<stop stop-color="#F4AC26"/>
<stop offset="1" stop-color="#FDCB0C"/>
</linearGradient>
<!-- паттерн для изображения -->
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://i.stack.imgur.com/pFlxC.jpg" x="0" y="0"
width="600" height="450" />
</pattern>
</defs>
</svg>
</div>