SVG实例代码笔记，详细注释(三）

最新推荐文章于 2024-05-11 17:37:14 发布

努力学习前端的77

最新推荐文章于 2024-05-11 17:37:14 发布

阅读量413

点赞数 1

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

本文链接：https://blog.csdn.net/qq_36545813/article/details/105675813

版权

本文档详尽地整理了SVG（可缩放矢量图形）的各种实例代码，每个例子都配有详细的注释，帮助读者理解并掌握SVG的使用技巧。

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

svg实例汇总：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- SVG内容直接定义在html页面中 -->
    <!-- 直接嵌入的SVG会继承父文档的样式，默认情况下采用inline的方式进行显示。 -->
    <!-- SVG绘制图形使用‘/’单标签表示结束符 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="1000">
            <!-- 矩形元素 -->
            <rect x="30" y="30" width="300" height="100" rx="20" ry="20" style="fill:olive;stroke-width:5;stroke:red;"/>
            <!-- x和y - 绘制矩形的左上角坐标值
            width和height - 设置绘制矩形的宽度和高度
            rx和xy - 设置矩形的圆角
            矩形的轮廓线为5px的红色轮廓，填充色为牛油果绿-->
    
            <!-- 椭圆元素 -->
            <ellipse cx="400" cy="220" rx="100" ry="200"  style="fill:pink;stroke-width:2;stroke:black;fill-opacity:0.7;stroke-opacity:0.9"/>
            <!-- cx和cy - 绘制椭圆的圆心坐标值
            rx和ry- 绘制椭圆的水平方向/垂直方向的半径  【注意：当rx和ry的值相同时,绘制的是圆形】
            fill-opacity 填充色透明度    stroke-opacity 轮廓线透明度 -->

            <!-- 圆形元素 -->
            <circle cx="100" cy="350" r="40" stroke="black" stroke-width="2" fill="red" />
            <!--  cx cy表示圆心的x,y坐标。  r表示圆的半径。 -->

            <!-- 直线元素 -->
            <line x1="0" y1="0" x2="100" y2="300"  style="stroke-width:2;stroke:red;"/>
            <!-- <line x1="起点坐标" y1="" x2="终点坐标" y2="" /> -->
            <!-- 注意：绘制直线时,默认描边颜色为白色 -->
    
            <!-- 多边形元素:比如三角形 -->
            <polygon points="10,150 200,150 300,550" style="fill:orange;stroke:orangered;stroke-width:2;"/>
            <!-- points--折线中所有的点坐标，都设置在该属性中 -->
    
            <!-- 曲线元素：折线 -->
            <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke-width:2;stroke:blue;" />

            <!-- 特效元素如下 ：注意：线性渐变或射线渐变,设置基准线(圆)的坐标值必须是百分值，允许为负值，允许为大于 100% 的值
            设置渐变颜色位置必须是百分值只能是从 0% ~ 100%----------------------------------------------------------->
           
            <!-- 线性渐变------基准线 -->
            <!-- <defs>
                <linearGradient id="grad" x1="基准线的起点坐标" y1="" x2="基准线的终点坐标" y2="" >
                    <stop offset="0%~100%" stop-color="颜色" />
                </linearGradient>
            </defs>
            <rect fill="url(#渐变元素的id)" /> -->
            <!-- 线性元素         实例--------------------------------------------- -->
            <defs>
                <!-- 水平渐变 【垂直渐变：<linearGradient id="grad000" x1="0%" y1="0%" x2="0%" y2="100%" >】 -->
                <linearGradient id="grad000" x1="0%" y1="0%" x2="100%" y2="0%"