logo标签列表

尝试将SVG绘制到画布上，为什么我的SVG XML被截断了？

javascriptcanvasd3.jssvginternet-explorer-11
3

我想做的就是将我动态创建的漂亮的SVG图形放入PDF中，目前是通过jsPDF实现。但addSVG无法使用，因此我尝试将它们转换为PNG格式，以便尝试使用addImage代替。

这是在IE11中（客户要求）。

如果我执行以下操作：

var lsvg = d3.select("#nowhere2").node().parentNode.innerHTML;
console.log(lsvg);

可能有三分之一的SVG显示在控制台中。更奇怪的是，它会在东西的正中间截断，所以没有结束标签或其他内容：

<div id="nowhere2"><svg xmlns="http://www.w3.org/2000/svg" width="50px" height="800px"><defs><pattern id="oaghm" patternUnits="userSpaceOnUse" width="30" height="30"><path stroke="#343434" stroke-linecap="square" stroke-width="80" d="M 0 30 l 30 -30 M -7.5 7.5 l 15 -15 M 22.5 37.5 l 15 -15" shape-rendering="auto" /></pattern></defs><rect style="fill: url(#oaghm);" stroke="black" x="10" y="20" width="10" height="10" /><defs><pattern id="zpdff" patternUnits="userSpaceOnUse" width="4" height="4"><path stroke="#343434" stroke-linecap="square" stroke-width="1" d="M 0 4 l 4 -4 M -1 1 l 2 -2 M 3 5 l 2 -2" shape-rendering="auto" /></pattern></defs><rect style="fill: url(#zpdff);" stroke="black" x="10" y="40" width="10" height="10" /><defs><pattern id="dyxwi" patternUnits="userSpaceOnUse" width="10" height="10"><path stroke="#343434" stroke-linecap="square" stroke-width="2" d="M 0 10 l 10 -10 M -2.5 2.5 l 5 -5 M 7.5 12.5 l 5 -5" shape-rendering="auto" /><path stroke="#343434" stroke-linecap="square" stroke-width="2" d

当然，这意味着我的DataURI已经损坏了，尽管Chrome努力尝试（仅用于测试，必须使用IE11）：
data:image/svg+xml;base64,PGRpdiBpZD0ibm93aGVyZTIiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTAiIGhlaWdodD0iODAwIj48ZGVmcz48cGF0dGVybiBpZD0iZmRldWsiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCI+PHBhdGggc3Ryb2tlPSIjMzQzNDM0IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utd2lkdGg9IjgwIiBkPSJNIDAgMzAgbCAzMCAtMzAgTSAtNy41IDcuNSBsIDE1IC0xNSBNIDIyLjUgMzcuNSBsIDE1IC0xNSIgc2hhcGUtcmVuZGVyaW5nPSJhdXRvIiAvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgc3R5bGU9ImZpbGw6IHVybCgjZmRldWspOyIgc3Ryb2tlPSJibGFjayIgeD0iMTAiIHk9IjIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+PGRlZnM+PHBhdHRlcm4gaWQ9InV2bWdnIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ij48cGF0aCBzdHJva2U9IiMzNDM0MzQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMSIgZD0iTSAwIDQgbCA0IC00IE0gLTEgMSBsIDIgLTIgTSAzIDUgbCAyIC0yIiBzaGFwZS1yZW5kZXJpbmc9ImF1dG8iIC8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCBzdHlsZT0iZmlsbDogdXJsKCN1dm1nZyk7IiBzdHJva2U9ImJsYWNrIiB4PSIxMCIgeT0iNDAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz48ZGVmcz48cGF0dGVybiBpZD

更奇怪的是，如果我只是将lsvg对象附加回页面，它就可以正常呈现。
var lsvg = d3.select("#nowhere2").node().parentNode.innerHTML;
$("#nowhere").append(lsvg);

如果我在添加后尝试在控制台中检查它，我会得到相同的截断字符串。当然，这让我相信这是一个时间/异步问题，但我已经尝试了我能想到的所有方法来解决这个问题，包括将绘制到画布再保存为PNG函数设置为我的初始SVG绘制函数的回调。每次我都得到相同奇怪的截断字符串。

这是我的画布（由于其他问题而在HTML中声明）：

<canvas id="lcanvas" width="50" height="800"></canvas>

研究让我相信可能是画布/ SVG 大小不匹配，但这似乎并非事实（SVG 的一点显示相同的宽度/ 高度，请参见上文）。此外，如果那是真的，它似乎很奇怪，在画布尚未涉及的情况下截断初始字符串赋值。
有一次我得到了完整的 DataURI：
data:image/svg+xml;base64,PGRpdiBpZD0ibm93aGVyZTIiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTAiIGhlaWdodD0iODAwIj48ZGVmcz48cGF0dGVybiBpZD0iZmxhY3EiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCI+PHBhdGggc3Ryb2tlPSIjMzQzNDM0IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utd2lkdGg9IjgwIiBkPSJNIDAgMzAgbCAzMCAtMzAgTSAtNy41IDcuNSBsIDE1IC0xNSBNIDIyLjUgMzcuNSBsIDE1IC0xNSIgc2hhcGUtcmVuZGVyaW5nPSJhdXRvIiAvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgc3R5bGU9ImZpbGw6IHVybCgjZmxhY3EpOyIgc3Ryb2tlPSJibGFjayIgeD0iMTAiIHk9IjIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+PGRlZnM+PHBhdHRlcm4gaWQ9InV5b3JkIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ij48cGF0aCBzdHJva2U9IiMzNDM0MzQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMSIgZD0iTSAwIDQgbCA0IC00IE0gLTEgMSBsIDIgLTIgTSAzIDUgbCAyIC0yIiBzaGFwZS1yZW5kZXJpbmc9ImF1dG8iIC8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCBzdHlsZT0iZmlsbDogdXJsKCN1eW9yZCk7IiBzdHJva2U9ImJsYWNrIiB4PSIxMCIgeT0iNDAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz48ZGVmcz48cGF0dGVybiBpZD0iZ2VoYW8iIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PHBhdGggc3Ryb2tlPSIjMzQzNDM0IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0gMCAxMCBsIDEwIC0xMCBNIC0yLjUgMi41IGwgNSAtNSBNIDcuNSAxMi41IGwgNSAtNSIgc2hhcGUtcmVuZGVyaW5nPSJhdXRvIiAvPjxwYXRoIHN0cm9rZT0iIzM0MzQzNCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNIDAgMCBsIDEwIDEwIE0gLTIuNSA3LjUgbCA1IDUgTSA3LjUgLTIuNSBsIDUgNSIgc2hhcGUtcmVuZGVyaW5nPSJhdXRvIiAvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgc3R5bGU9ImZpbGw6IHVybCgjZ2VoYW8pOyIgc3Ryb2tlPSJibGFjayIgeD0iMTAiIHk9IjYwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+PGRlZnM+PHBhdHRlcm4gaWQ9InZpYWNpIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiPjxwYXRoIHN0cm9rZT0iIzM0MzQzNCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNIDAgNSBsIDEwIDAiIHNoYXBlLXJlbmRlcmluZz0iYXV0byIgLz48cGF0aCBzdHJva2U9IiMzNDM0MzQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMiIgZD0iTSA1IDAgbCAwIDEwIiBzaGFwZS1yZW5kZXJpbmc9ImF1dG8iIC8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCBzdHlsZT0iZmlsbDogdXJsKCN2aWFjaSk7IiBzdHJva2U9ImJsYWNrIiB4PSIxMCIgeT0iODAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz48ZGVmcz48cGF0dGVybiBpZD0ic2d2eGoiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PGNpcmNsZSBmaWxsPSIjMzQzNDM0IiBzdHJva2U9IiMzNDM0MzQiIHN0cm9rZS13aWR0aD0iMCIgY3g9IjUiIGN5PSI1IiByPSI0IiAvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgc3R5bGU9ImZpbGw6IHVybCgjc2d2eGopOyIgc3Ryb2tlPSJibGFjayIgeD0iMTAiIHk9IjEwMCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiAvPjxkZWZzPjxwYXR0ZXJuIGlkPSJybHFreCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIj48cGF0aCBzdHJva2U9IiMzNDM0MzQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMiIgZD0iTSAwIDUgbCAxMCAwIiBzaGFwZS1yZW5kZXJpbmc9ImF1dG8iIC8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCBzdHlsZT0iZmlsbDogdXJsKCNybHFreCk7IiBzdHJva2U9ImJsYWNrIiB4PSIxMCIgeT0iMTIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+PGRlZnM+PHBhdHRlcm4gaWQ9Im1qbm5mIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNSIgaGVpZ2h0PSI1Ij48cGF0aCBzdHJva2U9IiMzNDM0MzQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMSIgZD0iTSAwIDAgbCA1IDUgTSAtMS4yNSAzLjc1IGwgMi41IDIuNSBNIDMuNzUgLTEuMjUgbCAyLjUgMi41IiBzaGFwZS1yZW5kZXJpbmc9ImF1dG8iIC8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCBzdHlsZT0iZmlsbDogdXJsKCNtam5uZik7IiBzdHJva2U9ImJsYWNrIiB4PSIxMCIgeT0iMTQwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+PGRlZnM+PHBhdHRlcm4gaWQ9ImJseXJqIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiPjxwYXRoIHN0cm9rZT0iIzM0MzQzNCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNIDAgNSBsIDEwIDAiIHNoYXBlLXJlbmRlcmluZz0iYXV0byIgLz48cGF0aCBzdHJva2U9IiMzNDM0MzQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMiIgZD0iTSA1IDAgbCAwIDEwIiBzaGFwZS1yZW5kZXJpbmc9ImF1dG8iIC8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCBzdHlsZT0iZmlsbDogdXJsKCNibHlyaik7IiBzdHJva2U9ImJsYWNrIiB4PSIxMCIgeT0iMTYwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+PGRlZnM+PHBhdHRlcm4gaWQ9ImhieHVwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNSIgaGVpZ2h0PSI1Ij48Y2lyY2xlIGZpbGw9IiMzNDM0MzQiIHN0cm9rZT0iIzM0MzQzNCIgc3Ryb2tlLXdpZHRoPSIwIiBjeD0iMi41IiBjeT0iMi41IiByPSIyIiAvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgc3R5bGU9ImZpbGw6IHVybCgjaGJ4dXApOyIgc3Ryb2tlPSJibGFjayIgeD0iMTAiIHk9IjE4MCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiAvPjwvc3ZnPjwvZGl2Pg==

因此，我使用了DataURI进行测试，换句话说，不用担心绘图是否已经完成。 我做了：

limg.src = "data:image/svg+xml;base64,PGRpdiBpZD0ibm93aGVyZTIiPjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTAiIGhlaWdodD0iODAwIj48ZGVmcz48cGF0dGVybiBpZD0iZmxhY3EiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCI+PHBhdGggc3Ryb2tlPSIjMzQzNDM0IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utd2lkdGg9IjgwIiBkPSJNIDAgMzAgbCAzMCAtMzAgTSAtNy41IDcuNSBsIDE1IC0xNSBNIDIyLjUgMzcuNSBsIDE1IC0xNSIgc2hhcGUtcmVuZGVyaW5nPSJhdXRvIiAvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgc3R5bGU9ImZpbGw6IHVybCgjZmxhY3EpOyIgc3Ryb2tlPSJibGFjayIgeD0iMTAiIHk9IjIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+PGRlZnM+PHBhdHRlcm4gaWQ9InV5b3JkIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ij48cGF0aCBzdHJva2U9IiMzNDM0MzQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMSIgZD0iTSAwIDQgbCA0IC00IE0gLTEgMSBsIDIgLTIgTSAzIDUgbCAyIC0yIiBzaGFwZS1yZW5kZXJpbmc9ImF1dG8iIC8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCBzdHlsZT0iZmlsbDogdXJsKCN1eW9yZCk7IiBzdHJva2U9ImJsYWNrIiB4PSIxMCIgeT0iNDAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz48ZGVmcz48cGF0dGVybiBpZD0iZ2VoYW8iIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PHBhdGggc3Ryb2tlPSIjMzQzNDM0IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0gMCAxMCBsIDEwIC0xMCBNIC0yLjUgMi41IGwgNSAtNSBNIDcuNSAxMi41IGwgNSAtNSIgc2hhcGUtcmVuZGVyaW5nPSJhdXRvIiAvPjxwYXRoIHN0cm9rZT0iIzM0MzQzNCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNIDAgMCBsIDEwIDEwIE0gLTIuNSA3LjUgbCA1IDUgTSA3LjUgLTIuNSBsIDUgNSIgc2hhcGUtcmVuZGVyaW5nPSJhdXRvIiAvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgc3R5bGU9ImZpbGw6IHVybCgjZ2VoYW8pOyIgc3Ryb2tlPSJibGFjayIgeD0iMTAiIHk9IjYwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+PGRlZnM+PHBhdHRlcm4gaWQ9InZpYWNpIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiPjxwYXRoIHN0cm9rZT0iIzM0MzQzNCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNIDAgNSBsIDEwIDAiIHNoYXBlLXJlbmRlcmluZz0iYXV0byIgLz48cGF0aCBzdHJva2U9IiMzNDM0MzQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMiIgZD0iTSA1IDAgbCAwIDEwIiBzaGFwZS1yZW5kZXJpbmc9ImF1dG8iIC8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCBzdHlsZT0iZmlsbDogdXJsKCN2aWFjaSk7IiBzdHJva2U9ImJsYWNrIiB4PSIxMCIgeT0iODAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgLz48ZGVmcz48cGF0dGVybiBpZD0ic2d2eGoiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PGNpcmNsZSBmaWxsPSIjMzQzNDM0IiBzdHJva2U9IiMzNDM0MzQiIHN0cm9rZS13aWR0aD0iMCIgY3g9IjUiIGN5PSI1IiByPSI0IiAvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgc3R5bGU9ImZpbGw6IHVybCgjc2d2eGopOyIgc3Ryb2tlPSJibGFjayIgeD0iMTAiIHk9IjEwMCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiAvPjxkZWZzPjxwYXR0ZXJuIGlkPSJybHFreCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIj48cGF0aCBzdHJva2U9IiMzNDM0MzQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMiIgZD0iTSAwIDUgbCAxMCAwIiBzaGFwZS1yZW5kZXJpbmc9ImF1dG8iIC8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCBzdHlsZT0iZmlsbDogdXJsKCNybHFreCk7IiBzdHJva2U9ImJsYWNrIiB4PSIxMCIgeT0iMTIwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+PGRlZnM+PHBhdHRlcm4gaWQ9Im1qbm5mIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNSIgaGVpZ2h0PSI1Ij48cGF0aCBzdHJva2U9IiMzNDM0MzQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMSIgZD0iTSAwIDAgbCA1IDUgTSAtMS4yNSAzLjc1IGwgMi41IDIuNSBNIDMuNzUgLTEuMjUgbCAyLjUgMi41IiBzaGFwZS1yZW5kZXJpbmc9ImF1dG8iIC8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCBzdHlsZT0iZmlsbDogdXJsKCNtam5uZik7IiBzdHJva2U9ImJsYWNrIiB4PSIxMCIgeT0iMTQwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+PGRlZnM+PHBhdHRlcm4gaWQ9ImJseXJqIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiPjxwYXRoIHN0cm9rZT0iIzM0MzQzNCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLXdpZHRoPSIyIiBkPSJNIDAgNSBsIDEwIDAiIHNoYXBlLXJlbmRlcmluZz0iYXV0byIgLz48cGF0aCBzdHJva2U9IiMzNDM0MzQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIHN0cm9rZS13aWR0aD0iMiIgZD0iTSA1IDAgbCAwIDEwIiBzaGFwZS1yZW5kZXJpbmc9ImF1dG8iIC8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCBzdHlsZT0iZmlsbDogdXJsKCNibHlyaik7IiBzdHJva2U9ImJsYWNrIiB4PSIxMCIgeT0iMTYwIiB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIC8+PGRlZnM+PHBhdHRlcm4gaWQ9ImhieHVwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iNSIgaGVpZ2h0PSI1Ij48Y2lyY2xlIGZpbGw9IiMzNDM0MzQiIHN0cm9rZT0iIzM0MzQzNCIgc3Ryb2tlLXdpZHRoPSIwIiBjeD0iMi41IiBjeT0iMi41IiByPSIyIiAvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgc3R5bGU9ImZpbGw6IHVybCgjaGJ4dXApOyIgc3Ryb2tlPSJibGFjayIgeD0iMTAiIHk9IjE4MCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiAvPjwvc3ZnPjwvZGl2Pg==";
console.log(limg.src);

在控制台中也是一样的。被炸毁。截断。字符串。以下是我的代码：

        var lsvg = d3.select("#nowhere2").node().parentNode.innerHTML;
        console.log(lsvg);

        var limg = new Image;
        var lcontext = canl.getContext('2d');

        limg.src = 'data:image/svg+xml;base64,' + btoa(lsvg);

        console.log(limg.src);
        lcontext.load = limg.addEventListener("load", function () {
            //console.log(limg.src);
            //This fun bit of code brought to you courtesy of IE11.
            try {
                lcontext.drawImage(limg, 0, 0);
            }
            catch (err) {
                setTimeout(lcontext.drawImage(limg, 0, 0), 0);
            };
            console.log(canl.toDataURL('image/png'));
        });

我把画布保持可见，这样我就可以看到可能发生的问题。它可以很好地从文件中绘制图像。同时，技术上我在这里得到了一个图像，只是它是空的。

我不想从文件中绘制，因为这会污染画布，而且我会收到canl.toDataURL的安全错误。

我尝试了各种获取lsvg bit的方式，如XMLSerialize等；但我得到的结果是一个比较短的头部（没有div元素），以及一个比较长的尾部，在确切相同数量的字符之后被截断。通常情况下，在事情的中间部分，仍然没有结束标签，只是一个突然中断的流。

需要明确的是，这不是裁剪后的SVG。这是一个“剪辑”的SVG。起始标记，没有结束标记，除非你使用Chrome并尝试渲染它（IE甚至都不会尝试），否则图像会损坏。在画布涉及之前，SVG已经损坏，甚至在显式赋值之后，与绘图功能无关。

哦，真是太好了，我有一个Fiddle！https://jsfiddle.net/94xhyv6t/在Chrome和IE中尝试并查看控制台。在Chrome中，如果你单击该链接，你会得到一个XML页面，但你可以在那里看到所有的SVG元素，在IE中它被截断。

很高兴知道我不完全疯了。

只是因为我知道有人会提到它，这里有一个没有父DIV节点的例子：https://jsfiddle.net/94xhyv6t/1/同样的问题。

编辑：注意：此Fiddle显示了问题：https://jsfiddle.net/94xhyv6t/1/在Chrome中加载，一切正常。在IE11中加载，一切都被截断了。我消除了所有其他代码，这个Fiddle仅显示了SVG字符串生成组件以及它如何在IE中被截断。我已经尝试过https://jsfiddle.net/94xhyv6t/4/中的XMLSerializer，但是问题依然存在。也许有一种解决方法？

最后的编辑（暂时）：控制台只是截断了显示，字符串本身没有问题。接受的答案有一个完整的Fiddle示例，展示了如何将SVG转换为画布，但是你不能在IE11中使用canvas.toDataURL()，因此这不是一个合适的转换方法。我使用canvg作为一种解决方法。

@Kaiido 类似于nighliber所遇到的问题，数据URI在某个时刻被裁剪了，当试图将其发送回以在fancybox中显示时，它会被切断。我记得在某个地方读到过IE不喜欢它，我还没有在11中进行测试（我的任何客户群体都不太可能使用它），但这是被接受的答案：IE 9和IE 10将无法将外部图像转换为数据URL，CORS问题。 - Daemedeor
其他答案中的CORS问题是IE没有实现crossOrigin属性，这在这里没有用。下面答案中给出的代码在IE9、IE10和IE11上运行良好，但没有在Edge上尝试过。 - Kaiido
嗯，那我会试一下的，不过如果我有时间的话。我们还有更重要的问题需要解决。 - Daemedeor
当 SVG 被绘制时，IE 会污染画布，因此您将无法执行.toDataURL操作（向 Microsoft 注意：加油 MS，你们的 Edge 浏览器已经很不错了，但还需要这些微调！）。可能的解决方法（虽然不幸）包括在服务器端构建图表或使用基于 canvas 的图表库。 - markE
是的，我现在明白了。我肯定需要想出一个解决方法，但我可能会发布一个全新的问题。 - nighliber
显示剩余4条评论
1个回答
1
不知道您的问题具体是什么，但使用

。
var data = new XMLSerializer().serializeToString(document.querySelector('svg'));
img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(data);

在火狐和谷歌浏览器上对我有效。

var n = 20, // number of layers
    m = 200, // number of samples per layer
    stack = d3.layout.stack().offset("wiggle"),
    layers0 = stack(d3.range(n).map(function() { return bumpLayer(m); })),
    layers1 = stack(d3.range(n).map(function() { return bumpLayer(m); }));

var width = 960,
    height = 500;

var x = d3.scale.linear()
    .domain([0, m - 1])
    .range([0, width]);

var y = d3.scale.linear()
    .domain([0, d3.max(layers0.concat(layers1), function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); })])
    .range([height, 0]);

var color = d3.scale.linear()
    .range(["#aad", "#556"]);

var area = d3.svg.area()
    .x(function(d) { return x(d.x); })
    .y0(function(d) { return y(d.y0); })
    .y1(function(d) { return y(d.y0 + d.y); });

var svg = d3.select("#worm").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("path")
    .data(layers0)
  .enter().append("path")
    .attr("d", area)
    .style("fill", function() { return color(Math.random()); });

function transition() {
  d3.selectAll("path")
      .data(function() {
        var d = layers1;
        layers1 = layers0;
        return layers0 = d;
      })
    .transition()
      .duration(2500)
      .attr("d", area);
}

// Inspired by Lee Byron's test data generator.
function bumpLayer(n) {

  function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < n; i++) {
      var w = (i / n - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }

  var a = [], i;
  for (i = 0; i < n; ++i) a[i] = 0;
  for (i = 0; i < 5; ++i) bump(a);
  return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
}
var lsvg = d3.select("#worm").node().parentNode.innerHTML;
console.log(lsvg);
var img = new Image;

console.log(img.src);
document.body.appendChild(img);
img.onload = function(){
 var canvas = document.createElement('canvas');
// IE seems to not set width and height for svg in img tag...
    canvas.width = this.width||960;
    canvas.height = this.height||500;
 canvas.getContext('2d').drawImage(this, 0,0);
    document.body.appendChild(canvas);
}
img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(new XMLSerializer().serializeToString(document.querySelector('svg')));
svg{border: 1px solid green}
img{border: 1px solid blue}
canvas{border: 1px solid red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="worm"></div>

请注意，我将canvas的内容添加到img标签的onload事件中。
编辑：我发现IE不会设置在标记中加载的svg的宽度和高度属性，因此您必须硬编码它或从元素中获取它。
我也遇到了同样的问题，但我同意你附加的图片是正确的。也许console.log只是因为顺序不对而触发了，因为即使在你的代码中，我也看到了截断。我认为onload并不重要，因为svg对象的初始XML甚至被截断了（在你的代码中仍然显示为截断）。也许我真的快疯了。我会在我的实际代码中尝试你的方法，并回报结果。 - nighliber
对不起，但是我真的不明白你所说的“truncated”是什么意思... 你是指控制台只打印数据的一部分吗？那么别担心，所有的数据都在，只是默认设置了字符串显示的最大长度而已。 - Kaiido
所以画布终于绘制了SVG，但是当我尝试将画布保存为png时，我遇到了旧的安全错误问题。我想之前它能够工作的时候，它并不在意图像是否为空。无论如何，请注意，我必须坚持使用base64，并将SVG解析器更改为我的原始解析器（可能是D3的东西），才能使其正常工作：var svg = d3.select("#nowhere2").node().innerHTML; img.src = 'data:image/svg+xml;base64, ' + btoa(lsvg);如果您编辑答案并提供fiddle代码，我会接受它。如果您对解决安全问题有任何想法... - nighliber
是的，IE仍然会在画上svg时污染画布，因为它可能包含脚本。这不是w3c的建议，除了右键单击画布，“另存为...”外，您无法做任何事情。 - Kaiido
你能否使用你的代码为我的另一个问题创建一个答案，你之前做的onload部分已经回答了它。http://stackoverflow.com/questions/32891343/is-there-any-reliable-way-to-use-ctx-drawimage-in-ie11 - nighliber
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接