svg图片蒙板

预览

代码

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <filter id="maskfilter">
    <feColorMatrix in="SourceAlpha"
                   type="matrix"
                   values="0 0 0 1 0
                           0 0 0 1 0
                           0 0 0 1 0
                           0 0 0 1 0" />
  </filter>
  <mask id="svgmask">
    <image xlink:href="mask.png" x="0" y="0" width="130" height="130" filter="url(#maskfilter)"></image>
  </mask>
  <g transform="translate(100, 100)">
    <image id="handler" xlink:href="default.jpg" x="0" y="0" width="260" height="130" mask="url(#svgmask)"></image>
  </g>
</svg>

// https://code.jquery.com/jquery-2.1.0.min.js
(function ($) {
    var x, y, startX, startY, isDragging;
    x = y = startX = startY = 0;
    isDragging = false;
    var handler = $('#handler');
    handler.on('mousedown', function (e) {
      x = parseInt(handler.attr('x'));
      y = parseInt(handler.attr('y'));
      startX = e.pageX;
      startY = e.pageY;
      isDragging = true;
    });
    $(document).on('mousemove', function (e) {
      if (!isDragging) return;
      handler.attr('x', x + e.pageX - startX);
      handler.attr('y', y + e.pageY - startY);
    }).on('mouseup', function (e) {
      isDragging = false;
    });
  })(jQuery);