svg图像不能在画布上正确缩放

Question

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

我使用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并将所有内容复制到一个有效的文件中。一切正常。

Answer 1

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

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

如果我有两个相同svg文件的副本并将其中一个放入img标签并将另一个加载到画布上，则所有内容都会正确缩放。