SVG: как поменять картинку программно, вложенную в svg файл?

Question

[thehighhomie]

Есть svg файл, в нем лежит картинка. Как ее изменить программно?

Задумка такая:
Есть контейнер. В нем лежит блок с svg. Svg выступает в роли маски. К примеру добавим еще контейнер с картинками, возьмем DragnAndDrop'ом и переместим картинку на файл svg. При бросании картинки в контейнер я хочу поменять картинку в svg файле на ту, которую бросил.

Это просто пример, чтобы вы поняли задачу. Но в действительности мне нужно только понять как можно поменять картинку в svg файле программно, к примеру по какому-либо событию.

Возможно есть какие-либо библиотеки, которые упростят задачу? Знаю о библиотеке Snap.svg, смотрел доки там, но не нашел решение по задаче.

Так как я не работал плотно с svg (только как с картинками в ссылках), то я примерно представил как это может работать с библиотекой:
Взять svg файл с картинкой. Выбрать этот файл библиотекой, и при определенных событиях, через api библиотеки менять картинку. Но опять же, я примерно представил как это может работать и ни чего подобного не нашел.

Comments

[codefln]

Если правильно понял, то SVG вам нужно использовать не как файл, а как DOM элемент. Ну а дальше все просто. С помощью JS меняете картинку на какую вам нужно

[thehighhomie]

codefln, можно просто пример с кодом? как достать именно до нужной картинки в svg? На счет DOM вы правильно сказали, я перепутал походу. Но svg может большой быть и его не удобно будет вставлять в шаблоны, по этому еще и библиотеки хотел рассмотреть. Но наверное библиотеки тоже будут работать с DOM иначе не смогут тоже мне кажется работать с svg по ссылке на файл...

[codefln]

А по другому никак.
Не получится просто в файле программно менять, технически наверное реально, но точно не правильно так делать потому что вам нужно каждый раз перезаписывать файл удалять его из DOM, и загружать заново чтобы изменения сохранились. + Файл же будет общим для всех. Короче подход с файлом точно следует исключить.

Пример:
https://jsfiddle.net/zjyeakc4/6/

U.P.D
Если SVG действительно большой, то можно его подключать файлом и оставить глобально и в нем к примеру добавить: <use href="#myCircle"

А потом в нужном месте создавать еще одну свгшку, которая будет содержать этот элемент, и изменения вносить в ней. А главный svg будет подтягивать это

[thehighhomie]

codefln, круто) спасибо) вы крутой ман)

[thehighhomie]

codefln, напишите сюда ответ, я отмечу решением)))

Answer 1

[codefln]

А по другому никак.
Не получится просто в файле программно менять, технически наверное реально, но точно не правильно так делать потому что вам нужно каждый раз перезаписывать файл удалять его из DOM, и загружать заново чтобы изменения сохранились. + Файл же будет общим для всех. Короче подход с файлом точно следует исключить.

Пример:
https://jsfiddle.net/zjyeakc4/6/

U.P.D
Если SVG действительно большой, то можно его подключать файлом и оставить глобально и в нем к примеру добавить: <use href="#myCircle"

А потом в нужном месте создавать еще одну свгшку, которая будет содержать этот элемент, и изменения вносить в ней. А главный svg будет подтягивать это

Answer 2

[Kudis]

Если ваше приложение работает в браузере, то файл на сервере вы точно не поменяете средствами javascript
Тут нужен серверный бэкэнд.

Comments

[thehighhomie]

нет. все в браузере

[Kudis]

thehighhomie, а файл лежит где?

[thehighhomie]

Kudis, все с сервера берется и в dom рендерется

[thehighhomie]

Kudis, так что в dom все есть

Answer 3

[anjiJa]

Можно просто менять path в svg.

Answer 4

[Егор Поляков]

Вот подобное решение в примитивном виде: https://bundlespace.com/intro/lessons/lesson-group...