Vishal Panara Vishal Panara - 5 months ago 12
HTML Question

Please help me to make some changes in my hexagonal shape

I just want to make some changes in my hexagonal shape, I need image as it is, Only shape must be rotate.

OR

Tell me any other way to make this happen.

Note: I need image as it is, Only shape must be rotate. Sorry to not mention it before.

From this shape:



To this shape:



Thank you,

This is the code



<html>
<head>
<title></title>
</head>
<style type="text/css">
svg{
width:30%;
margin:0 auto;
}
#hex{
stroke-width:1;
stroke: #2f1522;
}

</style>
<body>
<svg viewbox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
<image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-40" width="150" height="100" />
</pattern>
</defs>
<polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/>
</svg>
</body>
</html>




Answer

Change the co-ordinates of polygon.

25,8 75,8 100,50 75,92 25,92 0,50 this co-ordinates creates the required effect.

Polygon is a closed shape created by connecting the points specified.

<html>

<head>
  <title></title>
</head>
<style type="text/css">
  svg {
    width: 30%;
    margin: 0 auto;
  }
  #hex {
    stroke-width: 1;
    stroke: #2f1522;
  }
  .rotate {}
</style>

<body>
  <svg viewbox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
        <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-40" width="150" height="100" />
      </pattern>
    </defs>
    <polygon id="hex" points="25 8 75 8 100 50 75 92 25 92 0 50" fill="url(#img)" />
  </svg>
</body>

</html>