html - svg 六边形半色调图案

Question

我一直在谷歌搜索，但没有找到这个问题的答案或文章。我想创建一个六边形网格，但我需要半色调图案，所以我可能需要在图案中使用多个六边形。下面是生成六边形图案但不是半色调图案的代码。我需要半色调图案水平移动。我有这个 link来自 adobe 的半色调图案，但网格太小，它是垂直的，但我想要水平的。这是我在 codepen 上制作的六边形网格的链接.有人可以告诉我如何将六边形图案水平放置在半色调图案中吗？

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: black;
}
svg {
  background: rgb(125, 155, 132);
}

polygon {
  fill: rgb(125, 155, 132);
  stroke-width: 1;
  stroke: #000;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
         <defs>
            <pattern id="hexagons" width="50" height="43.4" 
            patternUnits="userSpaceOnUse" 
            patternTransform="scale(2)">
                <polygon 
                points="24.8,22 37.3,29.2 37.3,43.7 24.8,50.9 12.3,43.7 12.3,29.2" 
                id="hex" shape-rendering="geometricPrecision" />
                <use xlink:href="#hex" x="25" />
                <use xlink:href="#hex" x="-25" />
                <use xlink:href="#hex" x="12.5" y="-21.7" />
                <use xlink:href="#hex" x="-12.5" y="-21.7" />
            </pattern>
         </defs>
        <rect width="100%" height="100%" fill="url(#hexagons)" />
    </svg>

Answer 1

由于六边形的半径是 x 的变量，因此您不能在此处使用模式。主要思想是这样的:

• svg 背景为白色；
• 六边形有 fill:black;
• 为了绘制六边形，您需要计算外接圆的中心。您可以使用外接圆 R 的半径值来执行此操作。这正在生成一个六边形格子。
• 在六 Angular 形晶格内，您需要更改六边形外接圆的半径，如下所示:let r = R * Math.sin(angle) 其中 Angular 是 x 值的函数，计算如下:let angle = map(x, 0, H, 0, Math.PI); 这意味着 x 是取一个介于 0 和 200 (H) 之间的值， Angular 值介于 o 和 Math.PI 之间。

请阅读我代码中的注释。

const SVG_NS = 'http://www.w3.org/2000/svg';
const SVG_XLINK = "http://www.w3.org/1999/xlink"
// variables used to draw the hexagon stack
let R = 5;// the radius of the circumscribed circle
let h = R * Math.sin(Math.PI / 3);//half height of the hexagon
let offset = 1.5 * R;//used to offset every second row of hexagons
let W = 200,H=200;//svg's viewBox = "0 0 200 200"

//draw the hexagonal lattice
let i = 0;
for(let y = 0; y<H; y+=h){
i++
let o = (i%2 == 0) ? offset : 0;
for(let x = o; x<W; x+=3*R){
  hex(x,y)
}
}


 // a function used to draw the hexagom
 // the radius of the hexagon depends on the x value
 function hex(x,y) {
    // the radius of the drawn hexagon is in function of the x value
    let angle = map(x, 0, H, 0, Math.PI);
    let r = R * Math.sin(angle) - .5
   
    let points = ""
    for (var a = 0; a < 6; a++) {
      let o = {}
      o.x = x + r * Math.cos(a * Math.PI / 3);
      o.y = y + r * Math.sin(a * Math.PI / 3);
      points+= `${o.x}, ${o.y} `
    } 
   
     let hexagon = drawSVGelmt({points:points},"polygon", svg)
  }



// a function used to draw a new svg element
function drawSVGelmt(o,tag, parent) {
  
  let elmt = document.createElementNS(SVG_NS, tag);
  for (let name in o) {
    if (o.hasOwnProperty(name)) {
      elmt.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(elmt);
  return elmt;
}


function map(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}

svg{background:white; border:1px solid;width:90vh;}
polygon{fill:black}

<svg id="svg" viewBox = "0 0 200 200" >  
</svg>

更新

OP 正在评论:

Thats kinda what I want but I'm trying to make a pattern so I can then use that patter for a mask for an image

及后者:

basically what you have made works but I need the pattern to repeat across the page becuase the image will be 100% width and about 800px height

在这种情况下，您可以将所有六边形放在一个组中，然后使用 clipPath 像这样剪辑组:

var SVG_NS = 'http://www.w3.org/2000/svg';
var SVG_XLINK = "http://www.w3.org/1999/xlink"
let H = 800,W=500
var R = 5;
//var l = R;
var h = R * Math.sin(Math.PI / 3);
var offset = 1.5 * R;



let i = 0;
for(let y = 0; y<H; y+=h){
i++
let o = (i%2 == 0) ? offset : 0;
for(let x = o; x<W; x+=3*R){
  hex(x,y)
}
}

 function hex(x,y) {
    let angle = map(x, 0, W, 0, Math.PI);
    let r = R * Math.sin(angle) - .5
   
    let points = ""
    for (var a = 0; a < 6; a++) {
      let o = {}
      o.x = x + r * Math.cos(a * Math.PI / 3);
      o.y = y + r * Math.sin(a * Math.PI / 3);
      points+= `${o.x}, ${o.y} `
    } 
   
     let hexagon = drawSVGelmt({points:points},"polygon", svg)
  }




function drawSVGelmt(o,tag, parent) {
  
  let elmt = document.createElementNS(SVG_NS, tag);
  for (let name in o) {
    if (o.hasOwnProperty(name)) {
      elmt.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(elmt);
  return elmt;
}


function map(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}

svg{background:white; border:1px solid;}
polygon{fill:black}

<svg viewBox = "0 0 500 800" > 
<clipPath  id="clip">
  <polygon points="250,0 100,100 0 300 100,600 200,800 400,600 500,500 400,200 250,0"/>
</clipPath>
  
<g id="svg" style="clip-path: url(#clip)"></g>
</svg>

如果您没有指定 svg 元素的宽度，它将占用所有可用的宽度，即:100%。