Как манипулировать встроенным SVG из vuex

Question

Итак, я создаю инструмент настройки для курсоров с помощью Vuejs и Vuex.В настоящее время я застрял на этапе, когда мне нужно привязать цвет, который пользователь собирается щелкнуть, чтобы заполнить курсор SVG.Я постараюсь описать шаг за шагом, как все работает и что он должен делать.

Прежде всего, у меня есть различные встроенные SVG , которые заменяют курсор HTML по умолчанию .Эти SVG находятся в состоянии Vuex .

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


Именно здесь начинается проблема.Теперь этот выбранный курсор отображается на втором компоненте, где пользователь должен иметь возможность изменить цвет заливки .
Что я не могу понять, так это как я могу получить доступ к свойству fill в svg?
Я пытался связать его через: fill = "dataName" , но это не сработало.

Я новичок в Vuejs, но надеюсь, что мой вопрос имеет смысл.

Answer 1

Проблема в том, что вы вставляете встроенный SVG (через v-html) после этапа компиляции Vue, поэтому, как вы заметили, Vue никогда не видит этот контент.Без большего контекста трудно понять, как вы могли бы достичь того, что вы хотите.

В качестве альтернативы, вы можете использовать все свои курсоры, используя currentColor для цвета заливки

<path fill="currentColor">

а затем просто установите свойство CSS color некоторого содержащего элемента на желаемый цвет