我真正想做的就是将我喜欢的动态创建的SVG放到PDF中,目前通过jsPDF。 addSVG不起作用,所以我试图将它们转换为PNG,以便尝试使用addImage。
这是在IE11(客户要求)。
如果我这样做:
var lsvg = d3.select("#nowhere2").node().parentNode.innerHTML;
console.log(lsvg);
可能有三分之一的SVG出现在控制台中。 Odder,它在事物的中间截断,所以没有结束标记或其他:
<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
Odder仍然,如果我只是将lsvg对象附加回页面,它就会很好地呈现。
var lsvg = d3.select("#nowhere2").node().parentNode.innerHTML;
$("#nowhere").append(lsvg);
如果我在追加后尝试在控制台中检查它,我会得到相同的截断字符串。当然,这让我相信它是一个时间/异步问题,但是我已经尝试过每一种我能想到的方法来解决这个问题,包括设置绘制到画布然后保存-to-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位,XMLSerialize等的方法;所有我得到的是一个更短的头(没有div元素)和一个更长的尾巴之前它被截断在看起来完全相同的字符数之后。就像往常一样,在事物的中间,所以仍然没有结束标签,只是在中游突然结束。
要清楚,这不是裁剪的SVG。这是一个剪辑的&#39; SVG。开始标记,没有结束标记,破坏图像,除非您是Chrome并且无论如何都尝试渲染它(IE甚至不打扰)。在画布涉及之前,SVG就会被破坏,甚至在显式赋值后也独立于绘图函数。
哦,甜蜜的正义,我有一个小提琴! https://jsfiddle.net/94xhyv6t/在Chrome和IE中试用,然后查看控制台。在Chrome中,如果您点击该链接,您将获得一个XML页面,但您可以在那里看到所有SVG元素,在IE中它会被截断。很高兴知道我并非完全疯了。
只是因为我知道有人会提到它,这里没有父DIV节点:https://jsfiddle.net/94xhyv6t/1/同样的问题。
编辑:注意:这个小提琴显示了问题:https://jsfiddle.net/94xhyv6t/1/。将它加载到Chrome中,一切正常。在IE11中加载它,一切都被截断了。我删除了所有其他代码,这个小提琴只显示了SVG字符串生成组件以及它在IE中是如何被截断的。我已经尝试了每个https://jsfiddle.net/94xhyv6t/4/的XMLSerializer,同样的问题。也许有一种解决方法?
现在进行最后编辑:控制台只是截断显示,否则字符串就可以了。接受的答案有一个完整的小提示示例,显示如何将SVG放入画布,但是你不能在IE11中做canvas.toDataURL(),所以这不是一个合适的转换方法。我使用canvg作为解决方法。
答案 0 :(得分:1)
不知道您的问题究竟是什么,但使用
var data = new XMLSerializer().serializeToString(document.querySelector('svg'));
img.src = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(data);
适用于FF和Chrome。
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')));
&#13;
svg{border: 1px solid green}
img{border: 1px solid blue}
canvas{border: 1px solid red}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="worm"></div>
&#13;
请注意,我在img标记的onload
事件中添加了画布内容。
编辑:我发现IE没有设置<img>
标签中加载的svg的宽度和高度属性,因此您必须对其进行硬编码或从{{1元素