javascript – SVG背景图像中的旋转条纹

下面的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>

解决方法:

如果您希望条纹相距固定距离 – 例如此处显示的是30px,那么您将无法保持固定大小的模式“框”.它需要在宽度上变化,以便条纹有足够的空间环绕并以30px标记与自身相遇.

如果角度为10度,条纹间距为30,则盒子的尺寸需要为：

 width = 30 / tan(10)
       = 170px

对于1度,它需要是1718.7px.

另一方面,如果你想保持一个固定宽度的图案(例如30px),那么你需要有多个条纹< rect>才能完成图案正方形的额外交叉以完成一个周期的条纹.

对于10度示例,我们已经确定周期的“周期长度”(周期)“为170px,因此您将需要六个矩形.

170/30 = 5.666

但是,当然,如果使用这种方法,对于某些角度和条纹宽度,您将失去条纹效果,因为您最终会在图案中使用固体条纹颜色块.

标签：javascript,css,background-image,svg
来源： https://codeday.me/bug/20190706/1399129.html