使用preserveAspectRatio属性和svg.js居中SVG

Question

我正在使用svg.js，我正在尝试将svg放在中间。我正在使用属性preserveAspectRatio，但它不起作用。

我已经定义了viewbox，但preserveAspectAttribute不起作用。当我编写preserveAspectAttribute时，最后一个svg也消失了，我不知道为什么。

我已经把所有东西（css，svg.js，js和必要的html）放在jsFiddle。

我希望任何人都可以帮助我。

Answer 1

如果你看一下控制台（按F12），你会看到一个错误：

Uncaught TypeError: undefined is not a function 

此外，在开发工具Net标签显示store.svg没有被加载。

问题1

与您的代码的主要问题是此行。

imageE.maskWith(circleE).move(-20).attr('preserveAspectRatio', 'xMidYMid meet') 

move()期待两个参数，因此该错误导致代码停止在该点。你的代码的商店部分没有运行。

如果更改行：

imageE.maskWith(circleE).move(-20,0).attr('preserveAspectRatio', 'xMidYMid meet') 

一切正常。

问题2

xMidYmid meet应xMidYMid meet（资本M）。但是，这个错误无效，因为默认是xMidYMid meet。

Working example here