如何获取 svg 文件并将其用作 <svg>？

Question

我的问题：

如何获取 .svg 文件并将其与 <svg> 标记一起使用，这样我也可以交互设置样式它（例如在悬停时），而不是像我在我的示例中所做的那样 带有 <img> 标签？

目标：

创建一个缩略图视图，在我的主要路线上显示每个国家的国旗（数量为 149 个）'/'

问题：

我在我的 Express 代码中设置了静态路由，因此所有标志都可用。

server.js:

app.use('/flags', express.static(FLAGS_FILES));
app.get('/flags', async (req, res) => {
    let myFlags;

    await readdir('data/flag-icons/')
        .then((flags) => myFlags = flags)
        .catch(err => console.log('Error:', err))

    res.json(myFlags)
});

在客户端，我想获取每个 .svg 文件并将其内联到我的组件中。

我的 React 组件如下所示：

地图缩略图组件：

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>
        );
    }

Answer 1

https://github.com/gilbarbara/react-inlinesvg 看起来对你有帮助。

Answer 2

在大多数情况下，您可以直接将 SVG 文件的内容内联到 render 函数中，例如 -

TL;DR

react-svg-loader

它提供了一个 webpack-loader、一个 CLI 和一些其他工具，可将 SVG 文件转换为 React 组件，该组件在渲染方法中内联包含 SVG 文件的内容。

这个想法的要点如下-

vector.svg

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

Vector.js

现在创建一个 vector.js 并像下面那样复制 SVG 的内容

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

您可以在此处手动编辑一些元素或分配 id 以使其具有动画效果。

地图缩略图组件

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

import Vector from "./path/to/vector"; // ... // ... render() { return <div> <Vector /> </div> }

这种从 SVG 到 React 组件的转换可以在一定程度上自动进行，并且由一些工具提供 - 一个这样的工具是 react-svg-loader。免责声明 - 我是 react-svg-loader.
的作者

如何获取 svg 文件并将其用作 <svg>？

How do you fetch an svg file and use it as <svg>?

javascript

svg

express

reactjs

inline-svg

我的问题：

目标：

问题：

TL;DR

vector.svg

Vector.js

地图缩略图组件