Шестиугольник в svg с изображением

27 марта 2021, 03:00

Есть два 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>

https://jsfiddle.net/djx4zaou/

Answer 1

Что бы картинка полностью влезала в SVG применяют атрибут preserveAspectRatio="none"

ваш код: https://jsfiddle.net/tzfk6ea1/

Справочная информация по изменения aspectRatio у изображений в SVG на MDN

Собственно дэмо на лицо

<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="0" y="0" width="100%" height="100%" preserveAspectRatio="none"/> 
      </pattern> 
    </defs> 
    <polygon   points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img1)"/> 
  </svg>