css - JSX 中的 SVG - 如何转换 defs 标签

Question

我有一些 SVG 有一个 defs 属性，里面有一个 style 标签。像这样:

<svg ...>
  <defs>
    <style>.cls-1,.cls-7{fill:#b2488d;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{stroke:#671f4d;}</style>
  </defs>
  ...
</svg>

我想在 React 中使用这些 SVG，所以我想将它们转换为有效的 JSX。我已经使用过类似 svg2jsx 的工具, 但他们去掉了 defs 标签，因此不再有任何样式属性。有没有办法通过在 JSX 中转换 SVG 来保留带有 style 标签的 defs ？或者在这种情况下不可能使用 css 类？

Answer 1

您可以在不进行任何转换的情况下保留样式。为此，使用 {` 和 `} 将所有 CSS 类包装在样式标签内。现在你的 SVG 变成这样了

<svg ...>
  <defs>
    <style>{`.cls-1,.cls-7{fill:#b2488d;}.cls-1,.cls-2,.cls-3,.cls-4,.cls-5,.cls-6{stroke:#671f4d;}`}</style>
  </defs>
  ...
</svg>

这将毫无问题地呈现。