当用作javascript Image的'.src'时，为什么带有viewBox和十六进制编码颜色的SVG图标无法呈现

如何解决当用作javascript Image的'.src'时，为什么带有viewBox和十六进制编码颜色的SVG图标无法呈现

我之前的问题被重复了，但现在我找到了问题的真正答案。

因此，最初的问题是，我想知道为什么.SVG图标上的十六进制颜色和视图框似乎阻止了它们的显示。我一直在使用base64，并且我对base64进行了解码，以便我可以更轻松地问这个问题，包括下面的小提琴（为完整起见，在下面包括了代码）。显示第一个图标，第二个不显示。

建议使用十六进制颜色％23进行转义。由于这个原因，这个问题被重复了。我无法解决如何删除重复的问号，因此我创建了这个新问题，与自己的答案分享我的发现。

https://jsfiddle.net/pqh0n1mw/1/

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
ctx.scale(2,2);

var img1 = new Image();
img1.src = 'data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><rect stroke="none" fill="rgb(255,38,0)" x="0" y="0" width="32" height="32" /><path stroke="none" fill="rgb(250,250,250)" d="M 0,8 L 8,8 8,-0 12,12 0,8 Z M 0,8" /><path stroke="rgb(255,255,255)" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" fill="none" d="M 1.5,1.5 L 17.5,17.5" /></svg>';

ctx.drawImage(img1,10,10);

var img2 = new Image();
img2.src = 'data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect fill="#FF2600" width="32" height="32"/><path fill="#FAFAFA" d="M0,12 Z"/><path stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" fill="none" d="M1.5,1.5 17.5,17.5"/></svg>';
ctx.drawImage(img2,42,10);

解决方法

因此，事实证明，以十六进制颜色将＃编码为％23会使情况变得更糟，并且不再显示b64编码的图标。而且无论如何，我没有将data-url用作.css中的url（），因为我理解它可能被视为选择器。

还建议使用Codepen可以解决此问题。这也行不通，因为Codepen会避开颜色甚至尖括号，对于以这种方式使用的.svg来说，这是不需要的。

因此，问题出在了'viewBox'的单独使用。在用作获取这些图标的另一个平台上，该代码运行良好，但在用作Image（）。src属性的javascript中却无法使用。

无论如何，将“ viewBox”替换为“ width”和“ height”属性后，图标现在将以原始的base64编码格式显示，包括使用十六进制编码的颜色。

当我再次遇到相同的问题时，我希望能对其他人或我将来的自我有所帮助：）

var img3 = new Image();
img3.src = "data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIj48cmVjdCBmaWxsPSIjRkYyNjAwIiB3aWR0aD0iMzIiIGhlaWdodD0iMzIiLz48cGF0aCBmaWxsPSIjRkFGQUZBIiBkPSJNMCw4IDgsOCA4LC0wIDEyLC0wIDEyLDEyIDAsMTIgWiIvPjxwYXRoIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZmlsbD0ibm9uZSIgZD0iTTEuNSwxLjUgMTcuNSwxNy41Ii8+PC9zdmc+";
ctx.drawImage(img3,74,10);

[更新]我使用最新的firefox 78.3.0.esr进行了测试，并看到了类似的行为。我还以CSS url（）背景对我的图标进行了测试，并且将它们编码为base64时，它们可以与viewBox的原始格式（无宽度和高度）以及十六进制颜色配合使用。因此，似乎通过Image（）。src进行的处理是不同的。

[update2]如下所述，即使不是b64编码的图像，我也不应该使用onload回调，因为并非所有浏览器都可以立即使用该图像。

safe way to access data url image