svg 图像在画布上无法正确缩放答案

【问题标题】：svg images don't scale properly on canvassvg 图像在画布上无法正确缩放
【发布时间】：2014-10-08 10:43:07
【问题描述】：

问题现在我已经能够解决问题了

我正在使用 kineticjs 在画布上绘制 .svg 图像。因为图像似乎没有正确缩放。比例不是我指定的大小。

var imageObj = new Image();
imageObj.onload = this.checkAllImagesLoaded.bind(this);
imageObj.src = imageSrc;

然后在checkAllImagesLoaded中

var KI = new Kinetic.Image({
                                  image: imageObj,
                                  x: 100,
                                  y: 100,
                                  height: 30,
                                  width: 30
                                  });

当我把它放在一个 html 图像标签中时，图像可以很好地缩放。

在我知道答案之前的问题

我正在向舞台添加图像并设置高度和宽度。

当我添加一个 .png 时，一切都正确。当我使用 svg 时，图像看起来很小。好像图像周围有很多填充物。而不是我期望的 30 像素。如果我将高度和宽度乘以 4，它们会显示出我期望的大小。

var imageObj = new Image();
imageObj.onload = this.checkAllImagesLoaded.bind(this);
imageObj.src = imageSrc;

然后在checkAllImagesLoaded中

var KI = new Kinetic.Image({
                                  image: imageObj,
                                  x: 100,
                                  y: 100,
                                  height: 30,
                                  width: 30
                                  });

当用作 img 标签的 src 时，相同的 svg 文件会正确显示和调整大小。

这发生在使用 cordova 的 ios 上，所以它本质上是一个 webkit 浏览器。

我已经能够发现一些 svg 文件有效。我尝试了一个实验，我复制了一个有效的 svg 文件的内容并替换了一个无效的内容。即使有了新的内容，它仍然显得很小。我尝试反向获取一个不起作用的 svg 并将所有内容复制到一个有效的文件中。然后一切正常。

【问题讨论】：

标签： javascript svg html5-canvas kineticjs

【解决方案1】：

我通过在画布和 img 标签中使用不同的 svg 解决了这个问题。

我的 html 页面上有一个加载 svg 的图像标签。如果我随后尝试将指向同一文件的新图像添加到画布（使用 kineticjs），则 svg 无法正确缩放。

如果我有同一个 svg 文件的两份副本，并将一份放在 img 标签中并将另一份加载到画布上，那么一切都会正确缩放。

【讨论】：