Динамическое добавление содержимого SVG с использованием React dangeriousSetInnerHTML с фильтром не работает в Chrome - PullRequest
Новая
       16

Динамическое добавление содержимого SVG с использованием React dangeriousSetInnerHTML с фильтром не работает в Chrome

0 голосов
/ 26 мая 2019

Я пытаюсь динамически добавлять SVG-контент в реакцию на отображение моего логотипа.

Пути SVG с логотипом хранятся в базе данных и передаются в пользовательский интерфейс.

Вот как я делаю это в своем компоненте реакции: 

const createLanguageListItemIcon = function(language) {
  const svgFilterDef = `
    <defs>
      <filter id="f1" x="0" y="0" width="200%" height="200%">
        <feOffset result="offOut" in="SourceGraphic" dx="2" dy="2" />
        <feColorMatrix result="matrixOut" in="offOut" type="matrix"
        values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
        <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="1" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </defs>
  `;

  return (
    <ListItemIcon>
        <svg viewBox="0 0 128 128" dangerouslySetInnerHTML={{ __html: svgFilterDef + language.logo_svg }}/>
    </ListItemIcon>
  );
}

Значок отображается в Chrome и Firefox , но тень работает только в Firefox . Кстати, если я дам дамп svgFilterDef + language.logo_svg в консоль и скопирую его непосредственно в пустой основной HTML-файл, тень будет работать и в Chrome . Кто-нибудь знает, в чем здесь проблема?

Существуют ли другие способы создания теней для путей SVG в Интернете?

...