使用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