Как заменить pattern в SVG?

Question

[sldo_ru]

Есть следующий код:

<svg width="114" height="131" viewBox="0 0 114 131" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <path d="M56.9886 0.986084L113.153 33.4125V98.2654L56.9886 130.692L0.824379 98.2654V33.4125L56.9886 0.986084Z" fill="#0D1126"/>
                                <path d="M56.9886 0.986084L113.153 33.4125V98.2654L56.9886 130.692L0.824379 98.2654V33.4125L56.9886 0.986084Z" fill="url(#pattern0)"/>
                                <defs>
                                    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
                                        <use xlink:href="#image0" transform="scale(0.005)"/>
                                    </pattern>
                                    <image id="image0" width="200" height="200" xlink:href="img.jpg"/>
                                </defs>
                            </svg>

Этот код автоматически сделан Figma, когда я делаю второй SVG только с другим url изображение все равно первое, как исправить?

Comments

[RAX7]

скорей всего figma не уникальные id генерирует, наверное придется поправить их вручную

Answer 1

[Игорь]

Что именно вы заменяете? Заменяя ссылку в атрибуте xlink:href элемента image все работает хорошо, все меняется.

В CSS есть clip и clip-path для создания маски, возможно вам пригодится

Comments

[sldo_ru]

Увы, нужна поддержка Edge, здесь вариант через clip-path не подойдет, делаю в v-for (vue.js) - изображение не меняется

[Игорь]

sldo_ru, попросбуйте сами руками поизменяйте (не через vue), и поймете что все работает.

[sldo_ru]

loonny, видел, что есть метод через clipPath, но не знаю, как реализовать, изображение всегда получается либо меньше, либо не шестиугольник

[Игорь]

sldo_ru, Дело в том, что вы изменяете ссылку, но ID паттерна остается неизменным.

[Игорь]

Вот смотрите, я сделал так как будет работать. Посмотрите на код внимательно и вы поймете о чем я говорю.
P.S. Вместо v-bind: я писал просто :, это сокращенная запись.
P.P.S Я сократил svg код.

[sldo_ru]

loonny, спасибо огромное, сработало

[Игорь]

sldo_ru, Не за что