在SVG背景图像中旋转条纹

Question

下面的javascript代码应该根据用户输入生成背景图像。用户应该能够改变条纹的角度和其他东西，如深度，颜色...

问题在于，当角度改变时，我无法使图案无缝重复。我认为这是因为模式总是从同一点开始。有没有办法控制它？

var atts = {
  size: [30, 30],
  depth: 50,
  rotDegrees: 45
};

function refresh() {
  var code = $('#tpl').html().replace(/{\:([^{}]+)}/g, function(match, key) {
    return atts[key] || match;
  });
  code = '<svg xmlns="http://www.w3.org/2000/svg" width="' + atts.size[0] + '" height="' + atts.size[1] + '">' + code + '</svg>';
  $('#preview').css('background-image', 'url("data:image/svg+xml;base64,' + window.btoa(code) + '")');
};

refresh();
$('input').on('input', function(e) {
  atts[this.name] = this.value;
  refresh();
});

#preview {
  width: 600px;
  height: 600px;
  display: block;
  background: transparent none repeat center center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="rotDegrees" type="range" min="0" max="360" step="1" value="0" />
<input name="depth" type="range" min="1" max="100" step="1" value="60" />
<div id="preview"></div>
<script id="tpl" type="text/template">
  <defs>
    <pattern id="stripe-pattern" width="100%" height="100%" patternUnits="userSpaceOnUse" patternTransform="rotate({:rotDegrees})">
      <rect width="{:depth}%" height="100%" transform="translate(0,0)" fill="#fff" />
    </pattern>
    <mask id="stripe-mask">
      <rect x="0" y="0" width="100%" height="100%" fill="url(#stripe-pattern)" />
    </mask>
  </defs>
  <rect mask="url(#stripe-mask)" x="0" y="0" width="100%" height="100%" />
</script>