如何旋转SVG六边形？
我只是想在六角形状上做一些改变,我需要图像,只有形状必须旋转.或者,告诉我任何其他方法来实现这一目标.
注意:我需要图像,只有形状必须旋转.
从这个形状:
对于这种形状:
谢谢,
这是代码
<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>改变坐标polygon.
25,8 75,8 100,50 75,92 25,92 0,50 这种坐标创造了所需的效果.
多边形是通过连接指定点创建的闭合形状.
<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>