HTML:Base64图像显示/复制错误的高度

Question

所以,基本上我有一个像这样的简单base64图像:http://jsfiddle.net/rm5c8o1t

我的问题是它只显示它的上半部分.如果我只是将其添加到img标记:

style="height: 300px;"

它会显示我想要的.现在的问题是当我尝试复制它时(右键单击,复制图像),它在Firefox上根本不起作用,只有它的上半部分被复制到Chrome/Opera上.

图像是在SVG的Javascript中生成的,如下所示:

var svgData = new XMLSerializer().serializeToString(svg[0]);
var img = new Image();
img.src = "data:image/svg+xml;base64," + btoa(svgData);

svg是一个jQuery元素,在尝试将其附加到文档时按预期显示.我需要拥有实际图像而不是仅仅使用svg标签的原因是我希望用户能够轻松地复制图像.该应用程序基本上是一个包含数千种可能的背景/前景组合的编辑器,所以我不能简单地将这个SVG转换为带有外部工具的图像.

我究竟做错了什么？

编辑:更完整的jsfiddle:http://jsfiddle.net/p2Lv5sa0

Answer 1

不要通过样式指定SVG的尺寸.通过实际属性分配它们:

<svg id="svg" width="320" height="320" >

然后将生成具有正确大小的结果图像,并且复制/粘贴也将起作用.

功能完美,非常感谢!我还了解到在jquery元素上使用.width(x)和.height(x)将改变样式,而不是实际的width和height属性. (2认同)