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

【问题标题】：How can I use SVG code as a source for <img src={...} /> element?如何使用 SVG 代码作为 <img src={...} /> 元素的来源？
【发布时间】：2020-07-19 08:40:40
【问题描述】：

我在 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 所证明的那样 - 直接导入有效，导入作为元素的来源不起作用。我究竟做错了什么？为什么图片加载不出来？

【问题讨论】：

标签： reactjs svg

【解决方案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。

【讨论】：

【解决方案2】：

你的代码有几个问题

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

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

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

【讨论】：