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

Question

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

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

我已将所有内容（css，svg.js，js和必要的html）放入jsFiddle 。

我希望有人能帮助我。

Answer 1

如果您查看控制台（按F12键），将会看到错误：

Uncaught TypeError: undefined is not a function

同样，开发工具中的“网络”选项卡显示未加载store.svg。

问题1

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

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

move()需要两个参数，因此此错误导致代码在该点停止。 您的代码的store部分未运行。

如果将行更改为：

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

一切正常。

问题2

xMidYmid meet应为xMidYMid meet （大写M）。 但是，此错误无效，因为无论如何默认值为xMidYMid meet 。