将 SVG 作为 React 组件导入会覆盖 CSS 内联样式变量

Question

在我的 react 应用程序中，我将 svg 作为 React 组件导入，如下所示：

import React from "react";
import {ReactComponent as SomeSVGComponent} from "./some_svg.svg";

function SomeComponent(props){

   return (
       <div>
           <SomeSVGComponent />
       </div>
   );
}

应用程序是使用 create-react-app 创建的，因此 webpack 管理导入。

svg 的路径子节点有一个包含路径长度的内联样式变量：

<svg ...>
...
<path style="--pathLength:180.12531;" d=.../>
</svg>

这个变量是我的应用动画正常工作所必需的。

但是，（我相信这是 webpack 在这种情况下所做的）当 svg 作为 react 组件导入时，样式被覆盖为 style={{-pathlength:180.12531}} 导致编译错误：

   Failed to compile.

   SyntaxError: unknown: Unexpected token (8:4)

   6 |   ...props
   7 | }) => <svg width={137} height={46} {...props}>{title ? <title>{title}</title> : null}<path style={{
>  8 |     -pathlength: 762.1506987288266
     |     ^
   9 |   }} .../>

是否可以在不覆盖此内联样式变量的情况下保持将 SVG 作为 ReactComponent 导入的结构？

也许可以覆盖 webpack 的导入？

Answer 1

您在编译时遇到错误，因为 -pathlength:... 在 React 中不是有效的样式属性。为什么不尝试使用pathLength 内联属性为path 分配pathLength。

<svg ...>
   ...
   <path pathLength="180.12531;" d=.../>
</svg>