Question

我怎么能用svg做这个明星？我必须使用svg并尝试使用积分但不能正常工作。我不能使用元素路径。感谢。

<!DOCTYPE html>
<html>

<body>
    <svg width="100" height="100">
       <circle cx="50" cy="50" r="45" fill="white" stroke="red" stroke-width="10" />
       <circle cx="50" cy="50" r="30" stroke="red" stroke-width="10" fill="blue" />
       <polygon points="50,25 30,80 75,40 25,40 70,70" style="fill:white;"/> 
    </svg>
</body>

</html>

Answer 1

如果你想获得五角星最准确的分数，你可以从五角大楼轻松获得它们。

获取这些点的简单js函数是这样的（REPL，顺便说一下，你可以用于任何 n 边的多边形）：

var n = 5;
var points = [];
for (var i=0; i < n; i++) {
    var x = 50;
    var y = -50;
    var r = 25;
    points.push([x + r * Math.sin(2 * Math.PI * i / n),
                 y + r * Math.cos(2 * Math.PI * i / n)]);
}

结果是时钟方向的五边形点，从顶部开始（使用所有值作为正值）：

[ [ 50, -25 ],
  [ 73.77641290737884, -42.27457514062631 ],
  [ 64.69463130731182, -70.22542485937369 ],
  [ 35.30536869268818, -70.22542485937369 ],
  [ 26.22358709262116, -42.27457514062632 ] ]

您的订单为points[x], where x = 0, 3, 1, 4, 2。

使用它们作为示例四舍五入到最近的像素：

＆＃13;

<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="45" fill="white" stroke="red" stroke-width="10" />
  <circle cx="50" cy="50" r="30" stroke="red" stroke-width="10" fill="blue" />
 <polygon points="50,25 35,70 73,42 26,42 65,70" style="fill:white;"/> 
</svg> 
</body>
</html>

＆＃13;

Answer 2

这似乎有点接近。

＆＃13;

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
 
<circle cx="50" cy="50" r="45" fill="white" stroke="red" stroke-width="10" />
  
  <circle cx="50" cy="50" r="30" stroke="red" stroke-width="10" fill="blue" />
  
 <polygon points="50,25 35,70 73,42 26,42 65,70" style="fill:white;"/> 
  
</svg> 
 
</body>
</html>

＆＃13;

更新为使用@ frhd的号码，制作社区维基，

请参阅his answer了解计算

Answer 3

这里有路径

ncat

svg。美国队长

3 个答案: