侧边栏壁纸
博主头像
PeakGao

  • 累计撰写 72 篇文章
  • 累计创建 31 个标签
  • 累计收到 5 条评论

目 录CONTENT

文章目录
开发难点

SVG的介绍与简单案例-Peak-Gao

PeakGao
PeakGao
2024-11-27 / 0 评论 / 0 点赞 / 3 阅读 / 0 字 / 正在检测是否收录...
温馨提示：
部分素材可能会来自网络，若不小心影响到您的利益，请联系我们删除。

SVG介绍

概念Scalable Vector Graphics，（si 干 了able v k t gua fan ke s ）

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形，描述 2D 图形的语言
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

优势:

  • SVG 可被非常多的工具读取和修改（比如记事本）
  • SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大
  • SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
  • SVG 可以与 Java 技术一起运行 (Batik)
  • SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准
  • SVG 文件是纯粹的 XML

自我理解：html只能做一些简单的图形(长方形,正方形 加圆角…)而svg可以做不规则的图形,更加复杂、炫酷的图形,可以与js结合,基于xml

作用：

图形分为：位图(由像素组成,细节丢失)和矢量图(由数学向量方式记录的,放大不会模糊)

SVG与canvas的区别

canvas采用的是位图

SVG采用的是矢量图

svg常用的标签

矩形 <rect>
    属性:
   			<!--	width:设置宽度
                height:设置高度
                style:设置样式
                fill：填充
                stroke-width:设置圆的边框的像素
                stroke:设置边框
                x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
                y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
                fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
                stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
                opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）
                rx 和 ry 属性可使矩形产生圆角。
-->
圆形 <circle>
    属性: <!--
            cx指：圆的中心点到屏幕左边的距离
            cy：圆的中心点到屏幕上边的距离
            fill：填充
            r:半径
            stroke:设置圆的边框
            stroke-width:设置圆的边框的像素
            transparent:透明也就是圆形的边框内跟着你的整个页面的背景颜色
-->
椭圆 <ellipse>
    属性:
    <!--
                cx 属性定义圆点的 x 坐标
                cy 属性定义圆点的 y 坐标
                rx 属性定义水平半径
                ry 属性定义垂直半径
            -->
线 <line>
    属性:
    <!--
            x1 属性在 x 轴定义线条的开始
            y1 属性在 y 轴定义线条的开始
            x2 属性在 x 轴定义线条的结束
            y2 属性在 y 轴定义线条的结束
-->
折线 <polyline>
    属性:
     <!--
                points:定义多点的每个点的 x 和 y 坐标
            -->
多边形 <polygon>
    属性:
    <!--
                points 属性定义多边形每个角的 x 和 y 坐标
            -->
路径 <path>
<!-- d属性中包含所有路径的点，最后起点和终点连接起来形成闭合图形 -->
    属性:
    	路径数据:
    		<!--
            M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
			L = lineto(L X,Y) ：画直线到指定的坐标位置
			H = horizontal lineto(H X)：画水平线到指定的X坐标位置
			V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
			C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
			S = smooth curveto(S X2,Y2,ENDX,ENDY)：平滑曲率
			Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
			T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
			A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
			Z = closepath()：关闭路径
            PS：以上所有命令均允许小写字母。大写表示绝对定位 参照全局坐标系；，小写表示相对定位 参照父容器坐标系。
            -->

svg滤镜

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

svg高斯滤镜

必须在 <defs> 标签中定义 SVG 滤镜。
<filter> 标签用来定义 SVG 滤镜。<filter> 标签使用必需的 id 属性来定义向图形应用哪个滤镜？
<filter> 标签必须嵌套在 <defs> 标签内。<defs> 标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。
<filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
<feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
in="SourceGraphic" 这个部分定义了由整个图像创建效果
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>

<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000stroke:#000000
stroke-width:2filter:url(#Gaussian_Blur)"/>
    
   <defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>

<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000stroke:#000000
stroke-width:2filter:url(#Gaussian_Blur)"/>
</body>
</html>

xml中写svg的案例

<!--文件头必须有没有就会报错-->
<?xml version="1.0" encoding="UTF-8"?>
<!--想要用svg就得有这个文件-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--svg根节点  与html中的html标签一样-->
<svg xmlns="http://www.w3.org/2000/svg">
<!--    命名空间、规范 必须有 -->
    <circle cx="100" cy="100" r="40" fill="red">
        <!--圆的标签
            cx指：圆的中心点到屏幕左边的距离
            cy：圆的中心点到屏幕上边的距离
            fill：填充
            r:半径
        -->
    </circle>
</svg>

在html中写svg的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--直接引入圆形的图片-->
<img src="svg.png">
<!--直接引入圆形的图片-->
<div style="width:200pxheight:200pxbackground:url(svg.png) no-repeat"></div>
<!--使用框架引入图片-->
<iframe src="svg.png"></iframe>
<!--使用html语法写svg代码-->    
    <svg xmlns="http://www.w3.org/2000/svg" width="100%">
        <circle cx="100" cy="100" r="40" fill="transparent" stroke="black" stroke-width="5"  >
            <!--圆的标签
            cx指：圆的中心点到屏幕左边的距离
            cy：圆的中心点到屏幕上边的距离
            fill：填充
            r:半径
            stroke:设置圆的边框
            stroke-width:设置圆的边框的像素
            transparent:透明也就是圆形的边框内跟着你的整个页面的背景颜色
        -->
        </circle>
       <rect rx="20" ry="20" x="20" y="20" width="100" height="80" style="fill:rgb(0,0,255)
        stroke-width:1stroke:rgb(0,0,0)fill-opacity:0.1stroke-opacity:0.9opacity:0.5">
            <!--
                width:设置宽度
                height:设置高度
                style:设置样式
                fill：填充
                stroke-width:设置圆的边框的像素
                stroke:设置边框
                x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
                y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
                fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
                stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
                opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）
                rx 和 ry 属性可使矩形产生圆角。
            -->
        </rect>
         <!--椭圆-->
        <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50)
            stroke:rgb(0,0,100)stroke-width:2">
            <!--
                cx 属性定义圆点的 x 坐标
                cy 属性定义圆点的 y 坐标
                rx 属性定义水平半径
                ry 属性定义垂直半径
            -->
        </ellipse>
        <!--创建了三个累叠而上的椭圆-->
        <ellipse cx="240" cy="100" rx="220" ry="30"
                 style="fill:purple"/>

        <ellipse cx="220" cy="70" rx="190" ry="20"
                 style="fill:lime"/>

        <ellipse cx="210" cy="45" rx="170" ry="15"
                 style="fill:yellow"/>
         <!--创建线条-->
        <line x1="0" y1="0" x2="300" y2="300"
        style="stroke:rgb(99,99,99)stroke-width:2">
            <!--
            x1 属性在 x 轴定义线条的开始
            y1 属性在 y 轴定义线条的开始
            x2 属性在 x 轴定义线条的结束
            y2 属性在 y 轴定义线条的结束
-->
        </line>
         <!--创建含有不少于三个边的图形-->
        <polygon points="220,100 300,210 170,250" style="fill:#ccccccstroke:#000000stroke-width:1">
            <!--
                points 属性定义多边形每个角的 x 和 y 坐标
            -->
        </polygon>
        <!--创建含有不少于四个边的图形-->
        <polygon points="220,100 300,210 170,250 123,234" style="fill:#ccccccstroke:#000000stroke-width:1"/>
         <polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
                  style="fill:whitestroke:redstroke-width:2">
            <!--
                points:定义多点的每个点的 x 和 y 坐标
            -->
        </polyline>
        <!--用来定义路径。-->
        <path d="M250 150 L150 350 L350 350 Z" />
			<!-- d属性中包含所有路径的点，最后起点和终点连接起来形成闭合图形 -->
            <!--
            M = moveto
            L = lineto
            H = horizontal lineto
            V = vertical lineto
            C = curveto
            S = smooth curveto
            Q = quadratic Belzier curve
            T = smooth quadratic Belzier curveto
            A = elliptical Arc
            Z = closepath
            PS：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
            -->
        <!--圆弧-->
        <path d="M153 334
                    C153 334 151 334 151 334
                    C151 339 153 344 156 344
                    C164 344 171 339 171 334
                    C171 322 164 314 156 314
                    C142 314 131 322 131 334
                    C131 350 142 364 156 364
                    C175 364 191 350 191 334
                    C191 311 175 294 156 294
                    C131 294 111 311 111 334
                    C111 361 131 384 156 384
                    C186 384 211 361 211 334
                    C211 300 186 274 156 274"
              style="fill:whitestroke:redstroke-width:2"/>
    </svg>
</body>
</html>

SVG 线性渐变

SVG 渐变必须在 <defs> 标签中进行定义。
    渐变类型：
		1.线性渐变
		2.放射性渐变
    <linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
<linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
      <!--水平渐变-->
       <defs>
            <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:rgb(255,255,0)
stop-opacity:1"/>
                <stop offset="100%" style="stop-color:rgb(255,0,0)
stop-opacity:1"/>
            </linearGradient>
        </defs>

        <ellipse cx="200" cy="190" rx="85" ry="55"
                 style="fill:url(#orange_red)"/>
      <!--垂直渐变-->
      <defs>
            <linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
                <stop offset="0%" style="stop-color:rgb(255,255,0)
stop-opacity:1"/>
                <stop offset="100%" style="stop-color:rgb(255,0,0)
stop-opacity:1"/>
            </linearGradient>
        </defs>

        <ellipse cx="200" cy="190" rx="85" ry="55"
                 style="fill:url(#orange_red)"/>
    </svg>
</body>
</html>

SVG放射性渐变

<radialGradient> 用来定义放射性渐变。

<radialGradient> 标签必须嵌套在 <defs> 中。<defs> 标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义。
    <radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
    <defs>
            <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"
                            fx="50%" fy="50%">
                <stop offset="0%" style="stop-color:rgb(200,200,200)
stop-opacity:0"/>
                <stop offset="100%" style="stop-color:rgb(0,0,255)
stop-opacity:1"/>
            </radialGradient>
        </defs>

        <ellipse cx="230" cy="200" rx="110" ry="100"
                 style="fill:url(#grey_blue)"/>

      
      
      
        <defs>
            <radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
                            fx="50%" fy="50%">
                <stop offset="0%" style="stop-color:rgb(200,200,200)
stop-opacity:0"/>
                <stop offset="100%" style="stop-color:rgb(0,0,255)
stop-opacity:1"/>
            </radialGradient>
        </defs>

        <ellipse cx="230" cy="200" rx="110" ry="100"
                 style="fill:url(#grey_blue)"/>
    </svg>
</body>
</html>
0

  1. 支付宝打赏

    qrcode alipay

  2. 微信打赏

    qrcode weixin
版权归属： PeakGao
本文链接： http://localhost:8090/archives/1732688200700
许可协议： 本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权

评论区