我只是想对我的六 Angular 形做一些改变，我需要原样的图像，只有形状必须旋转。或者，告诉我实现此目标的任何其他方法。
注意:我需要原样的图像，只有形状必须旋转。
从这个形状:
到这个形状:
谢谢，
这是代码
<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>最佳答案
改变多边形的坐标。
25,8 75,8 100,50 75,92 25,92 0,50 此坐标创建所需的效果。
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;
}
</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>关于html - 如何旋转 SVG 六 Angular 形？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37937637/