Блог

Я использую библиотеку js (mermaid) для создания svg на веб-странице. Мне нужно динамически применять стиль к частям svg, поскольку пользователь активирует различные команды с помощью сочетаний клавиш, в частности, мне нужно выделить элемент в svg, который в настоящее время обозначен как выбранный в логической модели. Рассматривая другие вопросы по динамическому стилю svg, мы имеем дело со встроенным статическим svg, поэтому они, вероятно, не применимы к моему случаю, и ни один из методов, которые я пробовал до сих пор, не сработал.

Стиль, который я пытаюсь применить border-radius : 2rem; box-shadow : 0 0 3rem red; , применяется к обычному html, это придает элементу светящуюся красную рамку.

Первое, что я попытался, это включить это как класс в элемент, подобный этому :

 <style>
  .highlight {
    border-radius : 2rem; 
    box-shadow : 0 0 3rem red;
  }
</style>
 

Добавление класса в список классов обычного html-элемента, например , , или

, привел бы к желаемому стилю. Однако, когда я программно получу элемент и добавлю класс в его список классов, он останется без светящейся границы. Проверка svg с помощью инструментов разработчика Chrome показала, что соответствующий класс был добавлен в список классов элемента. Использование того же метода было успешным для обычного html. Для справки вот метод, который я использовал для добавления класса:

graphicDiv.querySelector(selector).classList.add('highlight')

После этого я подумал, что, возможно, svg имеет некоторый стиль внутри своего внутреннего элемента, который переопределяет мой стиль, поэтому я добавил !important к моим стилям, чтобы они имели наивысший приоритет. Это все еще не сработало, поэтому затем я попытался установить свойство style для элемента, которое должно иметь наивысший приоритет, например::

graphicDiv.querySelector(selector).setAttribute('style', 'border-radius : 2rem !important; box-shadow : 0 0 3rem red !important;')

Это все еще не привело к какой-либо разнице в стиле svg. Проверка элемента в chrome dev tools показала, что атрибут style действительно был установлен.

Я также попытался добавить свое определение стиля к собственному элементу svg, получив его после создания svg и добавив свое определение стиля класса к его текстовому содержимому. Это все равно не сработало бы.

Наконец, я подумал, что эти свойства css могут не поддерживаться, поэтому я заменил их на background-color: green; , так как, кажется, я видел в статье о стилизации svg с помощью css, что этот css-реквизит использовался на . Это не сработало. Я попробовал применить к элементу в svg. Тоже не сработало.

Я совершенно сбит с толку, почему ничего из этого не работает. Я был бы очень признателен, если бы кто-нибудь мог помочь мне понять, как я мог динамически изменять стиль элементов svg!

В то время как обычные атрибуты CSS могут быть присвоены элементам SVG, большинство из них ничего не делают, поскольку элементы SVG по определению придерживаются другого набора правил стилизации.

Простой пример заключается в том, что в обычном CSS вы можете установить left: 25px , но для SVG вам нужно будет установить x: 25 .

Для желаемого стиля обычно достигается радиус границы stroke-width . Для цвета фона просто используйте fill . Что касается тени, она может быть немного сложнее, но вам следует взглянуть на feDropShadow .

Кроме того, применение этих стилей с помощью правил css должно быть примерно одинаковым.

Я надеюсь, что это хоть какая-то помощь.