如何使用 SVG 代码作为 <img src={...} /> 元素的源代码？

Question

我在React组件中直接使用svg代码：

export const AdventurerToken = (props) => {
return (
<div style={props.style}>
<svg width="3vw" height="3vw" viewBox="0 0 99 119">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,119.000000) scale(0.100000,-0.100000)"
fill={props.color} stroke="none">
<path d="M336 1174 c-10 -9 -16 -33 -16 -62 0 -26 -4 -52 -8 -59 -4 -6 -35 -17 -69 -23 -35 -7 -68 -19 -74 -26 -23 -28 50 -108 134 -145 20 -9 27 -19 27
-40 0 -23 -5 -30 -27 -35 -98 -21 -212 -74 -265 -122 -36 -32 -38 -38 -38 -92 0 -84 11 -92 134 -105 32 -3 62 -8 67 -11 11 -6 -12 -69 -50 -133 -77 -129
-114 -215 -115 -266 l-1 -50 168 -3 168 -2 57 90 c33 52 63 89 71 88 8 -2 35 -41 61 -88 l47 -85 172 -3 171 -2 0 43 c0 56 -35 151 -90 247 -86 149 -86 148
-74 160 6 6 43 14 83 17 98 8 121 26 121 97 0 62 -17 89 -84 133 -42 28 -157 74 -221 88 -29 6 -28 7 23 24 79 27 122 76 122 139 0 47 -72 102 -135 102 -18
0 -25 7 -30 33 -3 17 -13 49 -22 70 l-16 37 -138 0 c-112 0 -141 -3 -153 -16z"/>
</g>
</svg>
</div>
)
};

但是Firefox不接受sve宽度和高度属性中的"vw"单位。解决方法是使用svg作为图像元素的来源：

export const AdventurerToken = (props) => {
const color = props.color;
const adventurerSVG =
<svg width="100" height="100" viewBox="0 0 99 119">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,119.000000) scale(0.100000,-0.100000)" fill={color} stroke="none">
<path d="M336 1174 c-10 -9 -16 -33 -16 -62 0 -26 -4 -52 -8 -59 -4 -6 -35 -17 -69 -23 -35 -7 -68 -19 -74 -26 -23 -28 50 -108 134 -145 20 -9 27 -19 27
-40 0 -23 -5 -30 -27 -35 -98 -21 -212 -74 -265 -122 -36 -32 -38 -38 -38 -92 0 -84 11 -92 134 -105 32 -3 62 -8 67 -11 11 -6 -12 -69 -50 -133 -77 -129
-114 -215 -115 -266 l-1 -50 168 -3 168 -2 57 90 c33 52 63 89 71 88 8 -2 35 -41 61 -88 l47 -85 172 -3 171 -2 0 43 c0 56 -35 151 -90 247 -86 149 -86 148
-74 160 6 6 43 14 83 17 98 8 121 26 121 97 0 62 -17 89 -84 133 -42 28 -157 74 -221 88 -29 6 -28 7 23 24 79 27 122 76 122 139 0 47 -72 102 -135 102 -18
0 -25 7 -30 33 -3 17 -13 49 -22 70 l-16 37 -138 0 c-112 0 -141 -3 -153 -16z"/>
</g>
</svg>
return (
<img style={{width: "10vw"}} src={adventurerSVG}/>
)
};

这不起作用，证据如下https://codesandbox.io/s/dazzling-fire-m560j?file=/src/App.js-直接导入有效，作为元素源导入无效。我做错了什么？为什么未加载图像？

Answer 1

解决方法：使用<div>而不是<img>。将svg代码放入宽度和高度为100%的变量中，将变量放入宽度/高度正确的变量中：

export const AdventurerToken = (props) => {
const color = props.color;
const adventurerSVG =
<svg width="100%" height="100%" viewBox="0 0 99 119">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,119.000000) scale(0.100000,-0.100000)" fill={color} stroke="none">
<path d="M336 1174 c-10 -9 -16 -33 -16 -62 0 -26 -4 -52 -8 -59 -4 -6 -35 -17 -69 -23 -35 -7 -68 -19 -74 -26 -23 -28 50 -108 134 -145 20 -9 27 -19 27
-40 0 -23 -5 -30 -27 -35 -98 -21 -212 -74 -265 -122 -36 -32 -38 -38 -38 -92 0 -84 11 -92 134 -105 32 -3 62 -8 67 -11 11 -6 -12 -69 -50 -133 -77 -129
-114 -215 -115 -266 l-1 -50 168 -3 168 -2 57 90 c33 52 63 89 71 88 8 -2 35 -41 61 -88 l47 -85 172 -3 171 -2 0 43 c0 56 -35 151 -90 247 -86 149 -86 148
-74 160 6 6 43 14 83 17 98 8 121 26 121 97 0 62 -17 89 -84 133 -42 28 -157 74 -221 88 -29 6 -28 7 23 24 79 27 122 76 122 139 0 47 -72 102 -135 102 -18
0 -25 7 -30 33 -3 17 -13 49 -22 70 l-16 37 -138 0 c-112 0 -141 -3 -153 -16z"/>
</g>
</svg>
return (
<div style={{width: "3vw"}}>
{adventurerSVG}
</div>
)
};

适用于Firefox和Opera。

Answer 2

您的代码有几个问题

1. SVG不能用作图像，因为它缺少SVG命名空间声明，即xmlns="http://www.w3.org/2000/svg">
2. 您需要给img元素一个数据URI，而不仅仅是一个Node

所以一个工作示例看起来像这样。。。

import React from "react";
import ReactDOMServer from "react-dom/server";
import "./styles.css";
export default function App() {
return (
<div className="App">
{adventurerSVG}
<img src={'data:image/svg+xml,' + ReactDOMServer.renderToString(adventurerSVG)}/>
</div>
);
}
const adventurerSVG = (
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 99 119">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g
transform="translate(0.000000,119.000000) scale(0.100000,-0.100000)"
fill="red"
stroke="none"
>
<path
d="M336 1174 c-10 -9 -16 -33 -16 -62 0 -26 -4 -52 -8 -59 -4 -6 -35 -17 -69 -23 -35 -7 -68 -19 -74 -26 -23 -28 50 -108 134 -145 20 -9 27 -19 27
-40 0 -23 -5 -30 -27 -35 -98 -21 -212 -74 -265 -122 -36 -32 -38 -38 -38 -92 0 -84 11 -92 134 -105 32 -3 62 -8 67 -11 11 -6 -12 -69 -50 -133 -77 -129
-114 -215 -115 -266 l-1 -50 168 -3 168 -2 57 90 c33 52 63 89 71 88 8 -2 35 -41 61 -88 l47 -85 172 -3 171 -2 0 43 c0 56 -35 151 -90 247 -86 149 -86 148
-74 160 6 6 43 14 83 17 98 8 121 26 121 97 0 62 -17 89 -84 133 -42 28 -157 74 -221 88 -29 6 -28 7 23 24 79 27 122 76 122 139 0 47 -72 102 -135 102 -18
0 -25 7 -30 33 -3 17 -13 49 -22 70 l-16 37 -138 0 c-112 0 -141 -3 -153 -16z"
/>
</g>
</svg>
);