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>

- nice ass

---

根据这个答案，没有办法控制背景图片的偏移量。你可能需要将它绘制到画布上。我正在尝试使用画布来实现这个功能 - 最终我放弃了我的jsFiddle，但也许其他人会发现它作为一个起点很有用：https://jsfiddle.net/9jftpyp5/ - Maximillian Laumeister

Answer 1

如果您希望条纹之间的距离固定 - 例如像这里显示的30px，那么您将无法保持固定大小的图案“盒子”。它的宽度需要变化，以便条纹有足够的空间绕过并在30px处相遇。

对于10度角和30个条纹间距，该盒子需要具有以下尺寸：

 width = 30 / tan(10)
       = 170px

对于1度，需要1718.7像素。

另一方面，如果您想保持固定宽度的图案（例如30像素），那么您需要多个<rect>来完成图案正方形的额外交叉以完成一次条纹的周期。

对于10度的例子，我们已经确定了周期的“周期长度”，为170像素，因此您将需要六个矩形。

170/30 = 5.666

当然，如果您采用这种方法，对于某些角度和条纹宽度，您将失去条纹效果，因为您最终会在图案中得到一块实心的条纹颜色。

- Paul LeBeau