Javascript 带有SVG数据URI的img赢得'；在Firefox中无法显示

我试图通过设置html

的
src
属性来显示图像；
$（'img'）.attr（{src:src}）；

---

JsFiddle:

Firefox似乎不喜欢SVG中的unscaped

字符。我假设它将它们解释为散列分隔符

对它们进行编码似乎可以解决问题：

$('img').attr({'src': src.replace(/\#/g, '%23')});

src='数据：image/svg+xml；utf8'；
$（'img'）.attr({
“src”：src.replace（/\\\\/g，“%23”）
});
看，尝试将原始svg装入div元素，它以Chrome和FF呈现

HTML:



JS:

var theSvg=''；
$（'svgInMe'）.html（theSvg）；

如果对svg源代码进行base64编码，则它在两种浏览器中都可以工作。我在这里使用了data:uri生成器工具：

.
SVG不是现成的跨浏览器兼容；你能把raphael.js添加到你的网站吗？在我看来，这可能是使用SVG图像最安全的方法。嗨，frenchie，不，这个解决方案对我来说可能太重了。你使用哪一版本的Firefox？因为现代ff与img svgOk配合良好，所以您的思维可能会有所变化。如果没有，那么在这里寻找其他选项：对于更一般和正确的解决方案，是否有一种方法可以使用escape\u url或escape\u url\u组件来完成某种特殊字符的转义，以防#不是唯一的方法？我想你的意思是
encodeURI（）
和
encodeURIComponent（）
。这两个都不能正确地逃脱这个字符串。是的，这就是我的意思。嗯，那有点不幸。我希望这些东西都内置了API，这样单个开发人员就不会发明自己的解决方案。
<div id="svgInMe"></div>

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