Есть два svg
с изображением внутри, но во 2-ом svg
у изображения другой размер, из-за этого 2-ой svg
преобразуется в восьмиугольник.
Как можно этого избежать, чтобы изображение корректно адаптировалось под размер блока, чтобы был постоянно шестиугольник?
.wrap {
width: 200px;
height: 200px;
}
<div class="wrap">
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://dummyimage.com/100x100/7d407d/ffffff" x="-25" width="150" height="100" />
</pattern>
</defs>
<polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/>
</svg>
<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://dummyimage.com/100x50/7d407d/ffffff" x="-25" width="150" height="100" />
</pattern>
</defs>
<polygon points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img1)"/>
</svg>
</div>
ransform="scale(0.5)"
или увеличьте размеры картинки уже в svg