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