Как нарисовать рамку с помощью svg не используя clip-path?

Question

Подскажите как сделать шестиугольную рамку вокруг картинки, не используя clip-path. Так как данная технология является новой и не поддерживается на старых версиях браузеров.

Answer 1

Если без clip-path то можно использовать pattern для вставки изображения в svg в уже нарисованный путь для картинки ... смотрим дэмо в сниппете

Соответственно что бы корректно отображалось в старых браузерах то обязательно подключаем все пространства имён в заголовок SVG и используем подключение изображений через xlink:href но его лучше не использовать в SVG второй версии

.svg {
  max-width: 300px
}

<div class="svg">
  <svg viewBox="0 0 6.1 6" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="pattern" viewBox="0 0 6 6" width="100%" height="100%" x="0" y="0">
      <image xlink:href="https://vk.vkfaces.com/845522/v845522328/21ad3/Ob0So4Mk6BQ.jpg" width="6" height="6.3" preserveAspectRatio="none" x="0" y="-0.15" />
    </pattern>
  </defs>
  <rect width="6.1" height="6" fill="#F9D630" x="0" />

  <g>
    <path d="M6.1,5.5 3,3 6.1,0.5 " fill="none" stroke="#000" stroke-width="0.1" />
    <path d="M6.1,4.7 4.2,3 6.1,1.3" fill="none" stroke="#000" stroke-width="0.05" />
    <path d="M6.1,4 5,3 6.1,2" fill="#000" />
  </g>

  <path d="M0,0 3,0 6,3 3,6 0,6z" stroke="#fff" stroke-width="0.1" fill="url(#pattern)" />

</svg>
</div>

БЛОГ НА HUSL

Как нарисовать рамку с помощью svg не используя clip-path?

Ответы (1 шт):