CODEWITHSUNDEEP
htmlcsssvg
Vishal Panara
Vishal Panara

Reputation: 766

How to rotate a SVG 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 rotated.

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>

Upvotes: 2

Views: 1448

Answers (5)

Tawfiq abu Halawah
Tawfiq abu Halawah

Reputation: 1234

check this plunker to see a solution.

I rotated the polygon and I rotated the image to by minus degrees to compensate

<html>

<head>
  <title></title>

<style type="text/css">
  svg {
    width: 30%;
    margin: 0 auto;
    ;
  }
  #hex {
    stroke-width: 1;
    stroke: #2f1522;
  }
  .rotate {}
</style>
</head>
<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" transform="rotate(-90 50 50)" 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)" transform="rotate(90 50 50)"/>
  </svg>
</body>

</html>

Upvotes: 1

Pugazh
Pugazh

Reputation: 9561

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.

enter image description here

<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="25 8 75 8 100 50 75 92 25 92 0 50" fill="url(#img)" />
  </svg>
</body>

</html>

Upvotes: 7

Robert Longson
Robert Longson

Reputation: 124109

Rotate the shape in one direction and the image in the opposite direction.

<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"  transform="rotate(-90, 50, 50)"/>
    </pattern>
  </defs>
  <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)" transform="rotate(90, 100, 100)"/>
</svg>
  </body>
</html>

Upvotes: 1

iyyappan
iyyappan

Reputation: 777

please use this. It important to reduce the svg attribute viewbox size:0 0 100 100 while we rotating the svg.

<style>
#hex {
    border: 10px solid #ff0000 !important;
    stroke: #21776e;
    stroke-width: 2;
}

svg {
margin: 0 auto;
text-align: center;
transform: rotate(90deg);
width: 30%;
}
</style>
 <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" align="center">
      <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>

Upvotes: -1

Arthur
Arthur

Reputation: 377

Add this to your css.

#hex {
   -ms-transform: rotate(90deg); /* IE 9 */
   -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
   transform: rotate(90deg);
}

Upvotes: -1

Related Questions