ReactJs 在导入 svg 文件时抛出错误

Posted 2023-03-28

【中文标题】ReactJs 在导入 svg 文件时抛出错误

【英文标题】：ReactJs throwing error importing svg files

【发布时间】：2022-01-18 19:16:09

【问题描述】：

自从在 ReactJS 中更新到 TypeScript 4.5.4 后，我遇到了一个问题。由于我的更新 svg 导入不再起作用，因此引发以下错误：

SyntaxError: unknown: Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning.

这是我对应的svg文件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg   viewBox="0 0 12000 12000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <g id="Infinit" transform="matrix(49.0391,0,0,49.0391,500,2298.61)">
        <path d="M171.75,44.877C122.037,44.877 90.778,131.27 52.56,131.27C33.874,131.27 18.735,116.131 18.735,97.44C18.735,78.76 33.874,63.62 52.56,63.62C67.62,63.62 82.783,78.413 95.361,92.528L107.828,78.649C92.367,61.405 75.219,44.877 52.56,44.877C23.53,44.877 0,68.414 0,97.44C0,126.475 23.53,150 52.56,150C102.498,150 133.507,63.62 171.75,63.62C190.436,63.62 205.575,78.76 205.575,97.44C205.575,116.131 190.436,131.27 171.75,131.27C156.689,131.27 141.526,116.478 128.949,102.355L116.481,116.234C131.943,133.484 149.089,150 171.75,150C200.78,150 224.311,126.475 224.311,97.44C224.311,68.414 200.78,44.877 171.75,44.877Z" style="fill:url(#_Linear1);"/>
    </g>
    <g id="Circle-Pink" serif:id="Circle Pink" transform="matrix(49.0391,0,0,49.0391,500,2298.61)">
        <path d="M171.75,0.957C182.465,0.957 191.154,9.647 191.154,20.362C191.154,31.079 182.465,39.766 171.75,39.766C161.035,39.766 152.346,31.079 152.346,20.362C152.346,9.647 161.035,0.957 171.75,0.957Z" style="fill:url(#_Linear2);"/>
    </g>
    <g id="Cirlce-Orange" serif:id="Cirlce Orange" transform="matrix(49.0391,0,0,49.0391,500,2298.61)">
        <path d="M52.56,0.957C63.275,0.957 71.964,9.647 71.964,20.362C71.964,31.079 63.275,39.766 52.56,39.766C41.844,39.766 33.156,31.079 33.156,20.362C33.156,9.647 41.844,0.957 52.56,0.957Z" style="fill:url(#_Linear3);"/>
    </g>
    <defs>
        <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(224.311,0,0,224.311,0,75.4785)"><stop offset="0" style="stop-color:rgb(255,153,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(240,0,144);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(224.311,0,0,224.311,0,75.4785)"><stop offset="0" style="stop-color:rgb(255,153,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(240,0,144);stop-opacity:1"/></linearGradient>
        <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(224.311,0,0,224.311,0,75.4785)"><stop offset="0" style="stop-color:rgb(255,153,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(240,0,144);stop-opacity:1"/></linearGradient>
    </defs>
</svg>

我是这样导入的

import Brand from '../assets/brand.svg';

并像这样使用

          <img src=MBrand style= height: "100px", width: "auto", marginRight: "15px"   />

svg 文件最初是由 Affinity Designer 导出的，我永远不会遇到问题。有谁知道该怎么做？

【问题讨论】：

您应该显示用于导入和显示 SVG 的代码，以及任何类型或配置。

【参考方案1】：

这可能是因为您的 webpack（或您使用的任何允许您“导入”SVG 的捆绑器）。 src 属性需要一个字符串，我认为您希望 Brand 的值是其中编码了 SVG 内容 base64 的数据 URL。似乎您的捆绑器正在为您提供解析的 XML 数据，即。某种反应的 XML 文档在 src 属性中难以使用。修复您的捆绑程序配置。

console.log(Brand)