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 when I write the preserveAspectRatio the last SVG disappear too and I don't know why.

The HTML structure is:

<div id="infobox">
    <div id="learning" class="infothree">
        <div id="learningCircle"></div>
        <h3>Educativo</h3>
    </div>
    <div id="everybody" class="infothree">
        <div id="everybodyCircle"></div>
        <h3>¡Niños y mayores!</h3>
    </div>
    <div id="store" class="infothree">
        <div id="storeCircle"></div>
        <h3>Tienda</h3>
    </div>
</div>

And the JS code is:

var learn = SVG('learningCircle')
  var boxL = learn.viewbox(0, 0, 300, 200)
  var imageL = learn.image('http://distriker.com/lab/svg/learn.svg').loaded(function (loader){
  this.size(155)
  })
  var circleL = learn.circle(155).attr({
    fill: '#fff'
  })
  imageL.maskWith(circleL).attr('preserveAspectRatio', 'xMidYmid meet')

  var everybody = SVG('everybodyCircle')
  var boxE = everybody.viewbox(0, 0, 300, 200)
  var imageE = everybody.image('http://distriker.com/lab/svg/everybody.svg').loaded(function (loader){
  this.size(200)
  })
  var circleE = everybody.circle(155).attr({
    fill: '#fff'
  })
  imageE.maskWith(circleE).move(-20).attr('preserveAspectRatio', 'xMidYmid meet')

  var store = SVG('storeCircle')
  var boxS = store.viewbox(0, 0, 300, 200)
  var imageS = store.image('http://distriker.com/lab/svg/store.svg').loaded(function (loader){
  this.size(155)
  })
  var circleS = store.circle(155).attr({
    fill: '#fff'
  })
  imageS.maskWith(circleS).attr('preserveAspectRatio', 'xMidYmid meet')

I have put everything in a 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