javascript - 如何在React中打印base64格式的svg元素？

Question

我上传一个 svg 文件，如下所示:

if (event.target.files && event.target.files[0]) {
  let reader = new FileReader();

  reader.onloadend = upload => {
    let result = upload.target.result // in base64 format  
  };

  reader.readAsDataURL(file);  
}

结果采用 base64 格式。我可以使用 img 标签在 DOM 中显示此 svg 文件，但我想使用 svg 标签。

如何在 React 中使用 svg 节点在 dom 中显示此 svg 文件？

Answer 1

以彼得的回答为基础:

function SVG() {
    let svg = atob("PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgMTIwIj48c3R5bGU+LnN0MHtmaWxsOiNiY2JiYmJ9LnN0MXtmaWxsOiNmNDgwMjN9PC9zdHlsZT48cGF0aCBjbGFzcz0ic3QwIiBkPSJNODQuNCA5My44VjcwLjZoNy43djMwLjlIMjIuNlY3MC42aDcuN3YyMy4yeiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0zOC44IDY4LjRsMzcuOCA3LjkgMS42LTcuNi0zNy44LTcuOS0xLjYgNy42em01LTE4bDM1IDE2LjMgMy4yLTctMzUtMTYuNC0zLjIgNy4xem05LjctMTcuMmwyOS43IDI0LjcgNC45LTUuOS0yOS43LTI0LjctNC45IDUuOXptMTkuMi0xOC4zbC02LjIgNC42IDIzIDMxIDYuMi00LjYtMjMtMzF6TTM4IDg2aDM4LjZ2LTcuN0gzOFY4NnoiLz48L3N2Zz4=");
    return <div dangerouslySetInnerHTML={{ __html: svg }} />;
}

您需要确保您有一个干净的 SVG 文件，其中包含 <svg>标签打开和关闭:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
    <style>.st0{fill:#bcbbbb}.st1{fill:#f48023}</style>
    <path class="st0" d="M84.4 93.8V70.6h7.7v30.9H22.6V70.6h7.7v23.2z"/>
    <path class="st1" d="M38.8 68.4l37.8 7.9 1.6-7.6-37.8-7.9-1.6 7.6zm5-18l35 16.3 3.2-7-35-16.4-3.2 7.1zm9.7-17.2l29.7 24.7 4.9-5.9-29.7-24.7-4.9 5.9zm19.2-18.3l-6.2 4.6 23 31 6.2-4.6-23-31zM38 86h38.6v-7.7H38V86z"/>
</svg>

StackBlitz link