Center a SVG with preserveAspectRatio attribute and svg.js

Question

I am working with svg.js and I am trying to put in the middle a svg. I am using the attribute preserveAspectRatio, but it doesn't work.

I have defined the viewbox, but the preserveAspectAttribute didn't work. When I write the preserveAspectAttribute dissapear the last svg too and I don't know why.

I have put everything (css, svg.js, js and the necessary html) in jsFiddle .

I hope that anyone could help me.

Answer 1

If you look at the console (press F12), you will see an error:

Uncaught TypeError: undefined is not a function

also, the Net tab in dev tools shows that store.svg is not being loaded.

Problem 1

The main problem with your code is this line.

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

move() is expecting two parameters and so this error is causing the code to stop at that point. The store section of your code is not running.

If you change the line to:

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

everything works.

Problem 2

xMidYmid meet should be xMidYMid meet (capital M). However this error has no effect because the default is xMidYMid meet anyway.

Working example here