Javascript 如何获取svg文件并将其用作<；svg>；？ 我的问题:

如何获取.svg文件并将其与

标记一起使用，这样我还可以以交互方式对其进行样式设置（例如悬停），而不像我在示例中使用

时所做的那样
);
}

看起来它会对您有所帮助。

在大多数情况下，您可以将SVG文件的内容直接内联到

render

函数中，如-

TL；博士

它提供了一个webpack加载器、一个CLI和一些其他工具，用于将SVG文件转换为React组件，该组件在render方法中内联包含SVG文件的内容

这个想法的要点如下-

vector.svg 您可以在这里手工编辑某些元素，或者指定ID来设置它们的动画

地图缩略图组件 在MapThumbnail组件中，您可以将其作为JS导入，并按照您想要的方式设置SVG的样式-

<svg>
  <circle cx="50" cy="50" r="25" stroke-width="5" />
</svg>

从“/path/to/Vector”导入向量；
// ...
// ...
render（）{
返回
}

---

SVG到React组件的这种转换可以在一定程度上实现自动化，并由一些工具提供—其中一个工具是。免责声明-我是react svg loader的作者。

react svg软件包对我来说也很好。但我仍然试图理解如何“本地”实现它@ueeiie检查这些库的源代码，看看它们是如何实现的？

render(){
        const {flagcode} = this.props;
        const filepath = `/flags/${mapcode}/vector.svg`;

        console.log('filepath:', filepath);
        return (
            <MapThumbnailStyle>
                <img src={filepath} 
                     alt={flagcode} 
                     title={flagcode} 
                     width='40px' 
                     height='40px' 
                />
            </MapThumbnailStyle>
        );
    }

<svg>
  <circle cx="50" cy="50" r="25" stroke-width="5" />
</svg>

import React from "react"
export default () => (
  <svg>
    <circle cx="50" cy="50" r="25" stroke-width="5" />
  </svg>
);

import Vector from "./path/to/vector";

// ...
// ...

render() {
  return <div>
    <Vector />
  </div>
}