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

2019-07-06 16:45:50 阅读：161 来源： 互联网

标签：javascript css background-image 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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