title: svg.js strange interaction of scale and move/center
body: <p>I'm not very familiar working with svgs in js but here is something that is definitely strange.
  I'm having an arrow and then a path that is supposed to fill that arrow to a certain extend. looks like this:
  <img src="https://i.stack.imgur.com/OMxJj.png" alt="image 1">
  Now my aim is to be able to scale the white part but it should still stay inside that arrow<img src="https://i.stack.imgur.com/pqfK3.png" alt="image 2">.
  Now the weird thing is that I cannot figure out how move the white part back into the right place. I've tried different attempts.
  here is my current code (it works for scaleFactor 1 but not for any other):</p>
  
  <pre><code>var draw = SVG('arrow').size(500, 500);
      var arrowPath=draw.polyline('10,243.495 202.918,15.482 397.199,245.107').fill('none').stroke({ width: 20 });
  
      var arrow=draw.group();
      arrow.add(arrowPath.clone());
  
      var scaleFactor=0.5;
  
      var fillArrow=draw.path('M357.669,198.387c-41.747,35.357-95.759,56.678-154.751,56.678c-58.991,0-113.003-21.32-154.75-56.676l154.75-182.907  L357.669,198.387z');
      fillArrow.fill('#ffffee');
      var moveX=(arrowPath.width()/2-fillArrow.width()/2)/scaleFactor+9.5;
      console.log(moveX);
      fillArrow.center(arrowPath.cx(), arrowPath.cy()).scale(scaleFactor);
  //another attempt was
  fillArrow.move(moveX,0);
  </code></pre>