Question

我只是想在六角形状上做一些改变，我需要图像，只有形状必须旋转。或者，告诉我任何其他方法来实现这一目标。

注意：我需要图像，只需要旋转形状。

从这个形状：

达到此形状：

谢谢，

这是代码

＆＃13;

<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>

＆＃13;

Answer 1

更改polygon。

的坐标

25,8 75,8 100,50 75,92 25,92 0,50这个坐标创造了所需的效果。

Polygon是通过连接指定点创建的封闭形状。

<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>

Answer 2

检查this plunker以查看解决方案。

我旋转了多边形并将图像旋转到负角度以补偿

{{1}}

Answer 3

沿一个方向旋转形状，沿相反方向旋转图像。

<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>

Answer 4

将此添加到您的css。

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

Answer 5

请使用此。在我们旋转svg时减少svg属性视箱大小：0 0 100 100 非常重要。

<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>

如何旋转SVG六边形？

5 个答案: