我正在使用svg.js，我试图在中间放置一个svg。我使用了属性preserveAspectRatio，但它不起作用。
我已经定义了viewbox，但是当我编写preserveAspectRatio时，最后一个SVG也消失了，我不知道为什么。
HTML结构为：

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

JS代码为：

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')

我把所有东西都放进了jsFiddle。
我希望有人能帮助我。