用svg的折线（polyline）绘制一颗五角星

原创 于 2018-09-01 15:23:07 发布 · 2.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文展示了一个使用HTML和SVG创建简单图形的例子。通过JavaScript动态设置SVG元素，演示了如何绘制一个多边形，并设置了其样式属性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<svg width="700" height="700" style="background-color: #dddddd" id="s1"></svg>
<script>
    var s1=document.getElementById("s1")
    var html=""
    html=`<polyline points="0,170 484,170 88,440 240,4 391,439 0,170" fill-opacity="0.7" fill="red"></polyline>`
    s1.innerHTML=html
</script>
</body>
</html>