2D矢量图-SVG(3)-预定义形状,渐变,滤镜

最新推荐文章于 2024-10-01 22:08:10 发布

LJ·START

最新推荐文章于 2024-10-01 22:08:10 发布

阅读量179

点赞数

分类专栏： SVG 文章标签： svg css3

本文链接：https://blog.csdn.net/weixin_44790446/article/details/115247363

版权

本文深入探讨了SVG在2D矢量图形中的应用，包括如何绘制预定义的三角形和五角星，以及如何使用线性渐变赋予图形丰富的色彩。此外，还详细讲解了SVG滤镜效果，通过实例展示了如何实现各种视觉特效。

摘要由CSDN通过智能技术生成

SVG:

需求1:画一个三角形

需求2:画一个五角星

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            text-align: center;
        }
        svg{
            background: #ddd;
        }
    </style>
</head>
<body>
    <svg id="svg" width="500" height="400">
        <!--折线-->
        <polyline points="250,200 300,200 300,300 250,200" fill="#ddd" stroke="#f00"></polyline>
        <!--五角星