使用svg画一个三角形

原创于 2025-05-11 08:15:22 发布 · 476 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

在前端开发中，使用SVG（可缩放矢量图形）来绘制形状是非常常见的。下面是一个示例，展示了如何使用SVG来绘制一个简单的三角形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Triangle</title>
</head>
<body>
    <svg width="100" height="100">
        <polygon points="50,10 20,90 80,90" style="fill:lime;stroke:purple;stroke-width:1" />
    </svg>
</body>
</html>

在这个示例中，我们创建了一个svg元素，并设置了其宽度和高度。然后，我们在svg元素内部添加了一个polygon元素，用于绘制三角形。points属性指定了三角形的顶点坐标，这里我们使用了三个点（50,10）、（20,90）和（80,90）来定义三角形。最后，我们通过style属性设置了三角形的填充颜色（fill）为lime绿色，边框颜色（stroke）为purple紫色，以及边框宽度（stroke-width）为1。

你可以将上述代码保存为一个HTML文件，并在浏览器中打开它，就会看到一个使用SVG绘制的三角形。