Как вставлять картинку в svg path?

Question

[Korifa]

Например, есть у меня 30 ромбиков на сайте, все они одинаковые, а вот картинки в них разные. И как мне изменить эти картинки? 30 паттернов написать что ли?
Я пробовал просто задать фон всему блоку svg и добавить правило fill-rule, но так не получилось,

Comments

[Ankhena]

Как всё это должно выглядеть?
Почему ромб нельзя задать фоном, а картинку img или вторым фоном?

[Korifa]

Ankhena,
вот так примерно, только внутри шестиугольника должна быть картинка, если задать fill-rule, то углы одной картинки закрывают другую, я там обвел, у меня получилось с помощью pattern просто не охота 30 паттернов в html писать

Answer 1

[RAX7]

С помощью clip-path с clipPathUnits="objectBoundingBox" можно вот такое соорудить без паттернов

Comments

[Максим]

клип-пат ни везде работает ... я думал маску но её надо сдвигать ...хотя идея шикарная у Вас

[RAX7]

Максим Ленский, его можно атрибутом прописать
<image clip-path="url(#hexClip)" ...
он то уж точно почти во всех браузерах должен работать
https://developer.mozilla.org/en-US/docs/Web/SVG/E...

А если хочется с маской, то можно поиграть с maskUnits="objectBoundingBox"

[Максим]

RAX7, неа ..не хочет вот скрин с лисы - лиса с последними обновками

[RAX7]

Максим Ленский, вредный лис почему-то не хочет width/height из css брать, хотел чтобы код не дублировался, но не вышло.

[Korifa]

RAX7, спасибо! буду изучать