在Chrome中无法正常使用React使用React动态附加SVG内容的SetInnerHTML

Question

我正在尝试动态添加SVG内容，以对显示我的徽标做出反应。

徽标SVG路径存储在数据库中，并传递给ui。

这是我在react组件中执行此操作的方式：

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路径创建阴影吗？