用户变焦时，不同类型的图像的不同行为

Question

在我的项目中，我具有Zoom的功能，它可以在此处http://pixie.vebto.com/

缩放适用于画布上所有对象的正常工作，除了SVG图像。当我进行缩放时，SVG图像不会按比例缩放，并在边界框中更改其位置。它导致了有时会剪辑SVG图像的情况，而不是完全显示。

您可以在示例中使用按钮放大并放大，以查看情况如何。在画布上，也是通常的图像(不是SVG(，而且效果很好。

为什么会发生什么？使SVG图像作为正常图像，而没有如此奇怪的缩放？

我该怎么办？

示例-https：//jsfiddle.net/eugene_ilyin/pj47vqppp/

$("#in").click(function(){
    canvas.setZoom(canvas.getZoom() + 0.1);
    canvas.setHeight(1500 * canvas.getZoom());
  	canvas.setWidth(1500 * canvas.getZoom());
});
$("#out").click(function(){
    canvas.setZoom(canvas.getZoom() - 0.1);
    canvas.setHeight(1500 * canvas.getZoom());
  	canvas.setWidth(1500 * canvas.getZoom());
});
var canvas  = new fabric.Canvas('c');
var img1 = new fabric.Image(new Image());
          img1.set({
            left: 10,
            top: 10
          });
          img1.name = 'SVGTextImage';
img1.setSrc("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMjAwIiB2ZXJzaW9uPSIxLjEiPgogICAgICAgICAgPGRlZnM+CiAgICAgICAgICAgIDxwYXRoIGlkPSJmaWVsZE9uZV9fbGluZSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDE1MCAxMDApIiBmaWxsPSJub25lIiBzdHJva2U9InRyYW5zcGFyZW50IiBzdHJva2Utd2lkdGg9IjMiIGQ9Ik0gMTUwLCAxMDAgbSAtNTIsIDAgYSAgNTIsNTIgMCAxLDEgIDEwNCwwIGEgIDUyLDUyIDAgMSwxIC0xMDQsMCAiLz4KICAgICAgICAgIDwvZGVmcz4KICAgICAgICAgIDxnIGZpbGw9Im5hdnkiPgogICAgICAgICAgICA8dGV4dCBpZD0iZmllbGRPbmVfX291dHB1dFdyYXAiIHN0eWxlPSJ0ZXh0LWFuY2hvcjogbWlkZGxlOyBsZXR0ZXItc3BhY2luZzogN3B4OyIgdGV4dExlbmd0aD0iMTg1IiBmb250LWZhbWlseT0iSGlyYWdpbm8gTWluY2hvIj4KICAgICAgICAgICAgICA8dGV4dFBhdGggaWQ9ImZpZWxkT25lX19vdXRwdXQiIHN0YXJ0T2Zmc2V0PSI1MCUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bGluazpocmVmPSIjZmllbGRPbmVfX2xpbmUiIGZvbnQtc2l6ZT0iMjUiIGNsYXNzPSJuZy1iaW5kaW5nIj5XYXZ5IHRleHQgaXMgdGhlPC90ZXh0UGF0aD4KICAgICAgICAgICAgPC90ZXh0PgogICAgICAgICAgPC9nPgogICAgICAgIDwvc3ZnPg==", function() {
					img1.setCoords();
          img1.width = 1000;
          img1.height = 1000;
          img1.scaleX = 0.3;
          img1.scaleY = 0.3;
          canvas.renderAll();
        });
        
        var img2 = new fabric.Image(new Image());
          img2.set({
            left: 320,
            top: 10
          });
          img2.name = 'Regular image';
          img2.setSrc('http://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg', function() {
					img2.setCoords();
          img2.width = 500;
          img2.height = 500;
          img2.scaleX = 0.3;
          img2.scaleY = 0.3;
          canvas.renderAll();
        });
canvas.add(img1);
canvas.add(img2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.3/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="in">Zoom+</button>
<button id="out">Zoom-</button>
<canvas id="c" width="1500" height="1500"></canvas>

Answer 1

我不熟悉Fabricjs，但我相信您的问题是您使用的SVG没有width或height。它的标题看起来像这样：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" version="1.1">

我不确定面料如何内部处理图像，但我想它正在尝试读取图像的naturalWidth和naturalHeight，在这样的SVG中不包含合适的值。

如果我们更新SVG，则它具有width和height ...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" version="1.1"
     width="300" height="200">

属性，您的测试似乎可以按照您的期望工作。

$("#in").click(function(){
    canvas.setZoom(canvas.getZoom() + 0.1);
    canvas.setHeight(1500 * canvas.getZoom());
  	canvas.setWidth(1500 * canvas.getZoom());
});
$("#out").click(function(){
    canvas.setZoom(canvas.getZoom() - 0.1);
    canvas.setHeight(1500 * canvas.getZoom());
  	canvas.setWidth(1500 * canvas.getZoom());
});
var canvas  = new fabric.Canvas('c');
var img1 = new fabric.Image(new Image());
          img1.set({
            left: 10,
            top: 10
          });
          img1.name = 'SVGTextImage';
img1.setSrc("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMjAwIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIzMDAiIGhlaWdodD0iMjAwIj4NCiAgICAgICAgICA8ZGVmcz4NCiAgICAgICAgICAgIDxwYXRoIGlkPSJmaWVsZE9uZV9fbGluZSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDE1MCAxMDApIiBmaWxsPSJub25lIiBzdHJva2U9InRyYW5zcGFyZW50IiBzdHJva2Utd2lkdGg9IjMiIGQ9Ik0gMTUwLCAxMDAgbSAtNTIsIDAgYSAgNTIsNTIgMCAxLDEgIDEwNCwwIGEgIDUyLDUyIDAgMSwxIC0xMDQsMCAiLz4NCiAgICAgICAgICA8L2RlZnM+DQogICAgICAgICAgPGcgZmlsbD0ibmF2eSI+DQogICAgICAgICAgICA8dGV4dCBpZD0iZmllbGRPbmVfX291dHB1dFdyYXAiIHN0eWxlPSJ0ZXh0LWFuY2hvcjogbWlkZGxlOyBsZXR0ZXItc3BhY2luZzogN3B4OyIgdGV4dExlbmd0aD0iMTg1IiBmb250LWZhbWlseT0iSGlyYWdpbm8gTWluY2hvIj4NCiAgICAgICAgICAgICAgPHRleHRQYXRoIGlkPSJmaWVsZE9uZV9fb3V0cHV0IiBzdGFydE9mZnNldD0iNTAlIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeGxpbms6aHJlZj0iI2ZpZWxkT25lX19saW5lIiBmb250LXNpemU9IjI1IiBjbGFzcz0ibmctYmluZGluZyI+V2F2eSB0ZXh0IGlzIHRoZTwvdGV4dFBhdGg+DQogICAgICAgICAgICA8L3RleHQ+DQogICAgICAgICAgPC9nPg0KICAgICAgICA8L3N2Zz4=", function() {
					img1.setCoords();
          img1.width = 1000;
          img1.height = 1000;
          img1.scaleX = 0.3;
          img1.scaleY = 0.3;
          canvas.renderAll();
        });
        
        var img2 = new fabric.Image(new Image());
          img2.set({
            left: 320,
            top: 10
          });
          img2.name = 'Regular image';
          img2.setSrc('http://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg', function() {
					img2.setCoords();
          img2.width = 500;
          img2.height = 500;
          img2.scaleX = 0.3;
          img2.scaleY = 0.3;
          canvas.renderAll();
        });
canvas.add(img1);
canvas.add(img2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.3/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="in">Zoom+</button>
<button id="out">Zoom-</button>
<canvas id="c" width="1500" height="1500"></canvas>