Question

如何旋转六边形的图案，以使六边形点位于顶部并且图案在整个页面上保持一致

html, body {
  height: 100%;
  margin: 0;
  background: #e20341;
}

svg { 
  
}

polygon {
  fill: white;
  stroke: black;
  stroke-width: 1px;
}

    <svg viewBox="0 0 500 280" width="100%"> 

      <defs>
        <pattern id="hexagons" width="100%" height="100%" >
          <g id="svg" fill="black" x="0" y="0"></g>    
        </pattern>
        <mask id="hexagon-halftone-mask">  
         <rect x="0" y="0" width="100%" height="100%" fill="url(#hexagons)"  />

       </mask>
      </defs>

      <image width="100%" xlink:href="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426_960_720.jpg" mask="url(#hexagon-halftone-mask)"/> 
    </svg>

class Converter:
    def __init__(self, imperial_unit_name, metric_unit_name, factor):
        self.imperial_unit_name = imperial_unit_name
        self.metric_unit_name = metric_unit_name
        self.factor = factor # you could also add an offset if needed

    def run(self):
        miles = float(input("Please enter the {} to convert to {}: "
                            .format(self.imperial_unit_name,self.metric_unit_name)))
        print("The conversion from {} to {} is: {}"
              .format(self.imperial_unit_name,self.metric_unit_name, miles * self.factor))

# Use as many conversions as you want
conversions = [ ("Miles", "Kilometers", 1.609), ("Inches","Centimeters",2.54) ]

Answer 1

这是带有注释的新代码：

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 = 9;
/* switch offset and h*/
var offset = R * Math.sin(Math.PI / 3); 
var h = 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+=offset*2){ /*offset*2 instead of 3*R*/
  hex(x,y)
}
}

 function hex(x,y) {
    let angle = map(x, 0, W, 0, 5*Math.PI);
    let c = Math.sin(angle);
    let r = R * .99;
    
   
    let points = ""
    for (var a = 0; a < 6; a++) {
      let o = {}
      o.x = x + r * Math.sin(a * Math.PI / 3); /* sin instead of cos */
      o.y = y + r * Math.cos(a * Math.PI / 3); /* cos instead of sin */
      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;
}

html, body {
  height: 100%;
  margin: 0;
  background: #e20341;
}

svg { 
  
}

polygon {
  fill: white;
  stroke: black;
  stroke-width: 1px;
}

    <svg viewBox="0 0 500 280" width="100%"> 

      <defs>
        <pattern id="hexagons" width="100%" height="100%" >
          <g id="svg" fill="black" x="0" y="0"></g>    
        </pattern>
        <mask id="hexagon-halftone-mask">  
         <rect x="0" y="0" width="100%" height="100%" fill="url(#hexagons)"  />

       </mask>
      </defs>

      <image width="100%" xlink:href="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426_960_720.jpg" mask="url(#hexagon-halftone-mask)"/> 
    </svg>

svg旋转六角形图案-六角形指向顶部

1 个答案: