Fatal编程技术网
  • javascript/
  • Javascript 如何在React中以base64格式打印svg元素？

Javascript 如何在React中以base64格式打印svg元素？

javascript reactjs svg

Javascript 如何在React中以base64格式打印svg元素？,javascript,reactjs,svg,Javascript,Reactjs,Svg,我上传了一个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); } 结果

我上传了一个
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文件？

从“React”导入React；

    import React from "react";
import ReactDOM from "react-dom";

const loadSVG = container => {
  var dataURL =
    "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgdmlld0JveD0iMCAtMTAgMTAwIDg1IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogICAgPGRlZnM+CiAgICAgICAgPGNsaXBQYXRoIGlkPSJjbGlwIj4KICAgICAgICAgICAgPHBhdGggZD0iTTAsMCBMMTAwLDAgTDEwMCw3NSBMMCw3NSBMMCwwCiAgICAgICAgICAgICAgICAgICAgIE01MCwxNSBBMjAsMjAgMCAxLDAgNTAsNjAgQTIwLDIwIDAgMSwwIDUwLDE1CiAgICAgICAgICAgICAgICAgICAgIE01MCwyNSBBMTIuNSwxMi41IDAgMSwxIDUwLDUwIEExMi41LDEyLjUgMCAxLDEgNTAsMjUiLz4KICAgICAgICA8L2NsaXBQYXRoPgogICAgPC9kZWZzPgogICAgPHJlY3QgeD0iMzAiIHk9Ii0xMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjIwIiByeD0iMTAiIHJ5PSIxMCIvPgogICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSI3NSIgcng9IjE1IiByeT0iMTUiIGNsaXAtcGF0aD0idXJsKCNjbGlwKSIvPgo8L3N2Zz4K";
  var xhr = new XMLHttpRequest();
  xhr.open("GET", dataURL);
  xhr.addEventListener("load", function(ev) {
    var xml = ev.target.response;
    var dom = new DOMParser();
    var svg = dom.parseFromString(xml, "image/svg+xml");
    container.appendChild(svg.rootElement);
  });
  xhr.send(null);
};

const App = () => {
  React.useEffect(() => {
    loadSVG(refContainer.current);
  }),
    [];
  const refContainer = React.useRef(null);
  return <div ref={refContainer} />;
};


从“react dom”导入react dom；
const loadSVG=container=>{
var数据URL=
“数据：图像/svg+xml；base64，PD94BWGDMVYC2LVBJ0IMS4WIJ8+CJXZDMGCMCGMLLD0JVED0IMCATMTAGGMTAWIDGG1IIB4BBBWXUCZ0IAHR0DOVL3DY53MY5VCMCVMJAWMC9ZDMCGOGIGAGAGAGGRLZNM+CIAGAGAGAGAGAGAGAGGGNSAXBYXROIGLKPSJJJJ4ICAGICAGICAGICAGICAGICAGICAGGPHDGZD0ITTCAMTMTAWITTDAGEW3NCWIDGJ0ITCBMCMCMCMCMCVMTAWIDGJ01MCWIDCWIDGJJ0ITCAGMCAGMCAGMCAGMTAWIDCWIDJ01MCWIDGJJJ0ITCAGMCAGMCAGMCAGMCAGMCAGMCAGMCAGMCAIdagmswiduwlduweexmi41ldelyljugmacxldegnatismjuilz4kicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagivPgo8L3N2Zz4K”；
var xhr=new XMLHttpRequest（）；
xhr.open（“GET”，dataURL）；
xhr.addEventListener（“加载”，函数（ev）{
var xml=ev.target.response；
var dom=new DOMParser（）；
var svg=dom.parseFromString（xml，“image/svg+xml”）；
container.appendChild（svg.rootElement）；
});
xhr.send（空）；
};
常量应用=（）=>{
React.useffect（（）=>{
loadSVG（refContainer.current）；
}),
[];
const refContainer=React.useRef（null）；
返回；
};

从“React”导入React；
从“react dom”导入react dom；
const loadSVG=container=>{
var数据URL=
“数据：图像/svg+xml；base64，PD94BWGDMVYC2LVBJ0IMS4WIJ8+CJXZDMGCMCGMLLD0JVED0IMCATMTAGGMTAWIDGG1IIB4BBBWXUCZ0IAHR0DOVL3DY53MY5VCMCVMJAWMC9ZDMCGOGIGAGAGAGGRLZNM+CIAGAGAGAGAGAGAGAGGGNSAXBYXROIGLKPSJJJJ4ICAGICAGICAGICAGICAGICAGICAGGPHDGZD0ITTCAMTMTAWITTDAGEW3NCWIDGJ0ITCBMCMCMCMCMCVMTAWIDGJ01MCWIDCWIDGJJ0ITCAGMCAGMCAGMCAGMTAWIDCWIDJ01MCWIDGJJJ0ITCAGMCAGMCAGMCAGMCAGMCAGMCAGMCAGMCAIdagmswiduwlduweexmi41ldelyljugmacxldegnatismjuilz4kicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagicagivPgo8L3N2Zz4K”；
var xhr=new XMLHttpRequest（）；
xhr.open（“GET”，dataURL）；
xhr.addEventListener（“加载”，函数（ev）{
var xml=ev.target.response；
var dom=new DOMParser（）；
var svg=dom.parseFromString（xml，“image/svg+xml”）；
container.appendChild（svg.rootElement）；
});
xhr.send（空）；
};
常量应用=（）=>{
React.useffect（（）=>{
loadSVG（refContainer.current）；
}),
[];
const refContainer=React.useRef（null）；
返回；
};
您可以使用
atob（）
解码base64，因此这应该可以：

render() {
    return <div dangerouslySetInnerHTML={{ __html: atob(base64String) }} />
}

render（）{
返回
}
您可以使用
atob（）
解码base64，因此这应该可以：

render() {
    return <div dangerouslySetInnerHTML={{ __html: atob(base64String) }} />
}

render（）{
返回
}
基于彼得的答案：

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

函数SVG（）{
设svg=atob("2.2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 JMGMY4YLTCTMCZUTMTYUNC0ZLJIGNY4XEM05LJCTMTCUMMWY0LJCGNC45LTUOOS0Y04LTI0LJCTNC45IDUOxPTMTKUMI0xOC4ZBC02LJIGNC42IDIdIdIdIdIdUmi00LJYTMJZF6TdG2ADM4IdG2LJZ2LTcUn0GZOfY4NNOILZ48L2N2ZZZZ4=“”）；
返回；
}
您需要确保有一个干净的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>


.st0{fill:#bcbbbb}.st1{fill:#f48023}
基于彼得的答案：

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

函数SVG（）{
让svg=atob（“2.2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 JMGMY4YLTCTMCZUTMTYUNC0ZLJIGNY4XEM05LJCTMTCUMMWY0LJCGNC45LTUOOS0Y04LTI0LJCTNC45IDUOxPTMTKUMI0xOC4ZBC02LJIGNC42IDIdIdIdIdIdUmi00LJYTMJZF6TdG2ADM4IdG2LJZ2LTcUn0GZOfY4NNOILZ48L2N2ZZZZ4=“”）；
返回；
}
您需要确保有一个干净的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>


.st0{fill:#bcbbbb}.st1{fill:#f48023}

请阅读问题。我说“我可以使用
img
标记在DOM中显示此svg文件，但我想使用
svg
标记”请阅读问题。我说“我可以使用
img
标记在DOM中显示此svg文件，但我想使用
svg
标记“谢谢你的回答，彼得。但是我得到了“InvalidCharacterError:String包含无效字符”错误。谢谢你的回答，Peter。但我得到了“InvalidCharacterError:String包含无效字符”错误。