我试图通过将html src的{{1}}属性设置为我想要运行的svg代码来显示图像。这在chrome上工作正常，但在firefox上失败。
如何修改此代码以使用Firefox和Chrome？
HTML：
<img>JS：
<img></img>
JsFiddle：https://jsfiddle.net/p11mLasu/3/
答案 0 :(得分：2)
Firefox对SVG中未转义的#字符似乎并不满意。我假设它将它们解释为哈希分隔符。
编码它们似乎可以解决问题：
$('img').attr({'src': src.replace(/\#/g, '%23')});
src = 'data:image/svg+xml;utf8,<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 80 80" version="1.1" x="0px" y="0px"><path style="" d="m 11.958347,15.536432 c -0.417566,0.05245 -0.699072,0.416455 -1.333208,1.573186 -0.312318,0.53934 -0.674093,1.232201 -1.066567,2.026476 -0.05258,0.100663 -0.07769,0.133619 -0.133321,0.239978 -3.1051195,5.936663 -8.1858988,19.470857 -8.1858988,21.811287 0,0.146865 0.046316,0.296692 0.1333209,0.453291 0.00195,0.0074 -0.00212,0.01945 0,0.02666 0.026304,0.0454 0.04598,0.08678 0.079992,0.133321 0.069531,0.125808 0.1535797,0.233692 0.2933058,0.346634 0.1035412,0.08369 0.2057502,0.185432 0.3466341,0.293306 0.024887,0.01906 0.079075,0.0335 0.1066567,0.05333 0.106876,0.07683 0.2285881,0.179184 0.3732983,0.266642 0.6582732,0.435934 1.5688528,0.929375 2.7997373,1.519857 3.7990697,1.822505 8.1392307,3.232629 10.0790547,3.359685 0.0244,0.0036 0.05673,0.0236 0.07999,0.02666 0.01503,7.55e-4 0.03861,-5.86e-4 0.05333,0 0.137277,0.01568 0.25715,0.0335 0.346635,0.02666 0.595935,-0.04551 0.716019,-0.148104 1.4132,-1.253216 0.415447,-0.658532 1.041835,-1.762877 1.386537,-2.453103 1.64981,-3.303579 2.421859,-4.887803 3.01305,-5.546146 0.231428,0.09208 1.477919,0.582479 2.959723,1.173223 1.53711,0.612794 3.052262,1.211482 3.359685,1.306544 0.307421,0.09506 1.705565,0.716103 3.119707,1.386537 1.414142,0.670435 3.641698,1.658431 4.93287,2.213125 1.291173,0.554697 2.68742,1.192886 3.119708,1.413201 0.432283,0.220313 2.154789,0.950407 3.812975,1.626514 1.658184,0.676105 4.825899,1.983135 7.039341,2.906394 2.213438,0.923259 5.379258,2.17011 7.039339,2.746409 3.912624,1.358276 8.78521,3.271615 11.118957,4.372923 1.016873,0.47987 1.893422,0.879918 1.946484,0.879918 0.05306,0 1.042962,0.421177 2.186462,0.95991 1.1435,0.538734 2.215321,1.037141 2.399775,1.09323 0.17663,0.05372 0.362004,0.05673 0.533283,0.02667 0.0014,0.02596 -9.56e-4,0.05375 0.02666,0.07999 0.245796,0.233529 1.071763,-0.359152 1.813163,-1.306544 0.579482,-0.740489 1.085513,-1.933628 1.359873,-3.093043 0.0045,-0.01874 0.02236,-0.0346 0.02666,-0.05333 0.03069,-0.101602 0.02788,-0.193972 0.05333,-0.293306 0.07295,-0.284814 0.13554,-0.545543 0.159985,-0.799925 0.110747,-1.152584 -0.05807,-2.115011 -0.373298,-2.186462 -0.0079,-0.0091 -0.01848,-0.01795 -0.02666,-0.02666 -0.08998,-0.09582 -0.192956,-0.176323 -0.31997,-0.239977 -0.172357,-0.08638 -1.306361,-0.482852 -2.506432,-0.879918 -1.200068,-0.397066 -2.201318,-0.763372 -2.23979,-0.799925 -0.03847,-0.03655 -0.932088,-0.340748 -1.999812,-0.693268 -2.45045,-0.809042 -7.320218,-2.76932 -11.092293,-4.47958 -1.600447,-0.725645 -4.745419,-2.024472 -6.986011,-2.87973 -2.240593,-0.855255 -5.451516,-2.094427 -7.119332,-2.746409 -1.66782,-0.651982 -3.401166,-1.301832 -3.866304,-1.439864 -0.465143,-0.138032 -1.934905,-0.659353 -3.253028,-1.14656 -1.318122,-0.487208 -3.605866,-1.271834 -5.092855,-1.759834 -1.486991,-0.488001 -2.938013,-1.003733 -3.226364,-1.14656 -0.288349,-0.14283 -1.769924,-0.77205 -3.306357,-1.386536 -1.536436,-0.614486 -2.940293,-1.165261 -3.093043,-1.226552 -0.03632,-0.01457 -0.03034,-0.09656 -0.02666,-0.213313 0.0032,-0.101846 0.04708,-0.276772 0.07999,-0.453291 0.01879,-0.104619 0.02708,-0.200259 0.05333,-0.31997 0.07167,-0.310681 0.16571,-0.699569 0.293305,-1.146559 0.0033,-0.01188 -0.0034,-0.04134 0,-0.05333 0.130877,-0.455863 0.294321,-0.96081 0.479955,-1.546522 0.09375,-0.295815 0.155208,-0.475834 0.239978,-0.746596 0.172937,-0.568927 0.262819,-0.916142 0.479955,-1.626514 0.836364,-2.783632 1.04788,-3.891351 0.826589,-4.292931 -0.619941,-1.125009 -5.483072,-3.555356 -10.159047,-5.066191 -0.935902,-0.302397 -1.715592,-0.511687 -2.373111,-0.666604 -0.06462,-0.01523 -0.124502,-0.03951 -0.186649,-0.05333 -0.106921,-0.02998 -0.194326,-0.02773 -0.293305,-0.05333 -0.373998,-0.09673 -0.69295,-0.187661 -0.933246,-0.213313 -0.334303,-0.03569 -0.56771,-0.07915 -0.773261,-0.05333 z" fill="#000000" stroke="#000000" stroke-width="0.8532533"></path></svg>';
$('img').attr({
'src': src.replace(/\#/g, '%23')
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img></img>
答案 1 :(得分：1)
看，尝试将原始svg安装在div元素中，它在Chrome和FF中呈现
HTML：
<div id="svgInMe"></div>
JS：
var theSvg = '<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="0 0 80 80" version="1.1" x="0px" y="0px"><path style="" d="m 11.958347,15.536432 c -0.417566,0.05245 -0.699072,0.416455 -1.333208,1.573186 -0.312318,0.53934 -0.674093,1.232201 -1.066567,2.026476 -0.05258,0.100663 -0.07769,0.133619 -0.133321,0.239978 -3.1051195,5.936663 -8.1858988,19.470857 -8.1858988,21.811287 0,0.146865 0.046316,0.296692 0.1333209,0.453291 0.00195,0.0074 -0.00212,0.01945 0,0.02666 0.026304,0.0454 0.04598,0.08678 0.079992,0.133321 0.069531,0.125808 0.1535797,0.233692 0.2933058,0.346634 0.1035412,0.08369 0.2057502,0.185432 0.3466341,0.293306 0.024887,0.01906 0.079075,0.0335 0.1066567,0.05333 0.106876,0.07683 0.2285881,0.179184 0.3732983,0.266642 0.6582732,0.435934 1.5688528,0.929375 2.7997373,1.519857 3.7990697,1.822505 8.1392307,3.232629 10.0790547,3.359685 0.0244,0.0036 0.05673,0.0236 0.07999,0.02666 0.01503,7.55e-4 0.03861,-5.86e-4 0.05333,0 0.137277,0.01568 0.25715,0.0335 0.346635,0.02666 0.595935,-0.04551 0.716019,-0.148104 1.4132,-1.253216 0.415447,-0.658532 1.041835,-1.762877 1.386537,-2.453103 1.64981,-3.303579 2.421859,-4.887803 3.01305,-5.546146 0.231428,0.09208 1.477919,0.582479 2.959723,1.173223 1.53711,0.612794 3.052262,1.211482 3.359685,1.306544 0.307421,0.09506 1.705565,0.716103 3.119707,1.386537 1.414142,0.670435 3.641698,1.658431 4.93287,2.213125 1.291173,0.554697 2.68742,1.192886 3.119708,1.413201 0.432283,0.220313 2.154789,0.950407 3.812975,1.626514 1.658184,0.676105 4.825899,1.983135 7.039341,2.906394 2.213438,0.923259 5.379258,2.17011 7.039339,2.746409 3.912624,1.358276 8.78521,3.271615 11.118957,4.372923 1.016873,0.47987 1.893422,0.879918 1.946484,0.879918 0.05306,0 1.042962,0.421177 2.186462,0.95991 1.1435,0.538734 2.215321,1.037141 2.399775,1.09323 0.17663,0.05372 0.362004,0.05673 0.533283,0.02667 0.0014,0.02596 -9.56e-4,0.05375 0.02666,0.07999 0.245796,0.233529 1.071763,-0.359152 1.813163,-1.306544 0.579482,-0.740489 1.085513,-1.933628 1.359873,-3.093043 0.0045,-0.01874 0.02236,-0.0346 0.02666,-0.05333 0.03069,-0.101602 0.02788,-0.193972 0.05333,-0.293306 0.07295,-0.284814 0.13554,-0.545543 0.159985,-0.799925 0.110747,-1.152584 -0.05807,-2.115011 -0.373298,-2.186462 -0.0079,-0.0091 -0.01848,-0.01795 -0.02666,-0.02666 -0.08998,-0.09582 -0.192956,-0.176323 -0.31997,-0.239977 -0.172357,-0.08638 -1.306361,-0.482852 -2.506432,-0.879918 -1.200068,-0.397066 -2.201318,-0.763372 -2.23979,-0.799925 -0.03847,-0.03655 -0.932088,-0.340748 -1.999812,-0.693268 -2.45045,-0.809042 -7.320218,-2.76932 -11.092293,-4.47958 -1.600447,-0.725645 -4.745419,-2.024472 -6.986011,-2.87973 -2.240593,-0.855255 -5.451516,-2.094427 -7.119332,-2.746409 -1.66782,-0.651982 -3.401166,-1.301832 -3.866304,-1.439864 -0.465143,-0.138032 -1.934905,-0.659353 -3.253028,-1.14656 -1.318122,-0.487208 -3.605866,-1.271834 -5.092855,-1.759834 -1.486991,-0.488001 -2.938013,-1.003733 -3.226364,-1.14656 -0.288349,-0.14283 -1.769924,-0.77205 -3.306357,-1.386536 -1.536436,-0.614486 -2.940293,-1.165261 -3.093043,-1.226552 -0.03632,-0.01457 -0.03034,-0.09656 -0.02666,-0.213313 0.0032,-0.101846 0.04708,-0.276772 0.07999,-0.453291 0.01879,-0.104619 0.02708,-0.200259 0.05333,-0.31997 0.07167,-0.310681 0.16571,-0.699569 0.293305,-1.146559 0.0033,-0.01188 -0.0034,-0.04134 0,-0.05333 0.130877,-0.455863 0.294321,-0.96081 0.479955,-1.546522 0.09375,-0.295815 0.155208,-0.475834 0.239978,-0.746596 0.172937,-0.568927 0.262819,-0.916142 0.479955,-1.626514 0.836364,-2.783632 1.04788,-3.891351 0.826589,-4.292931 -0.619941,-1.125009 -5.483072,-3.555356 -10.159047,-5.066191 -0.935902,-0.302397 -1.715592,-0.511687 -2.373111,-0.666604 -0.06462,-0.01523 -0.124502,-0.03951 -0.186649,-0.05333 -0.106921,-0.02998 -0.194326,-0.02773 -0.293305,-0.05333 -0.373998,-0.09673 -0.69295,-0.187661 -0.933246,-0.213313 -0.334303,-0.03569 -0.56771,-0.07915 -0.773261,-0.05333 z" fill="#000000" stroke="#000000" stroke-width="0.8532533"></path></svg>';
$('#svgInMe').html(theSvg);
答案 2 :(得分：1)
如果您对svg源进行base64编码，则它适用于两种浏览器。我在这里使用了数据：uri生成器工具：