svg学习

于 2023-12-28 17:14:53 发布
阅读量1.2k 收藏 21
点赞数 23
文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44481113/article/details/135270787
版权

概念

  1. svg 可缩放矢量图形
  2.  svg 使用xml格式定义图像

svg 形状

矩形 <rect>

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;
    stroke:rgb(0,0,0)" />

    </svg>

代码解释：

  • rect 元素的 width 和 height 属性可定义矩形的高度和宽度
  • style 属性用来定义 CSS 属性
  • CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
  • CSS 的 stroke-width 属性定义矩形边框的宽度
  • CSS 的 stroke 属性定义矩形边框的颜色
  • x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
  • y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
  • CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
  • CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
  • CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）
  • rx 和 ry 属性可使矩形产生圆角。

例子：

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="600" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <rect x="20" y="20" width="250"  rx="20" ry="20"  height="250" style="fill:blue;stroke:pink;stroke-width:5;
    fill-opacity:0.1;stroke-opacity:0.9; " />

    </svg>

圆形 <circle>

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    
    <svg width="600" height="600" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
    
    <circle cx="120" cy="120" r="100" stroke="black"
    stroke-width="2" fill="blue"/>
    
    </svg>

代码解释：

  • cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)

  • r 属性定义圆的半径。

椭圆 <ellipse>

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="600" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(208, 229, 16);
stroke:rgb(195, 71, 29);stroke-width:5" />

    </svg>

代码解释：

  • cx 属性定义圆点的 x 坐标
  • cy 属性定义圆点的 y 坐标
  • rx 属性定义水平半径
  • ry 属性定义垂直半径

   

<body>
    <p>下面的例子创建了三个累叠而上的椭圆</p>
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <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" />
    </svg>
    
    <p>下面的例子组合了两个椭圆（一个黄的和一个白的）：</p>
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

        <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:yellow" />

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

    </svg>
</body>

线 <line>

<body>
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    
    <svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
    
    <line x1="0" y1="0" x2="300" y2="300"
    style="stroke:rgb(240, 23, 23);stroke-width:2"/>
    
    </svg>
</body>

代码解释：

  • x1 属性在 x 轴定义线条的开始
  • y1 属性在 y 轴定义线条的开始
  • x2 属性在 x 轴定义线条的结束
  • y2 属性在 y 轴定义线条的结束

多边形 <polygon>

<body>
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    
    <svg width="600" height="600" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
    
    <polygon points="220,100 300,210 170,250"
    style="fill:#dab3b3;
    stroke:#40d6ea;stroke-width:2"/>
    
    </svg>
</body>

代码解释：

  • points 属性定义多边形每个角的 x 和 y 坐标

<body>
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    
    <svg width="600" height="600" version="1.1"
    xmlns="http://www.w3.org/2000/svg">
    
    <polygon points="220,100 300,210 170,250 123,234"
    style="fill:#e76464;
    stroke:#000000;stroke-width:1"/>
    
    </svg>
</body>

折线 <polyline>

<body>
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="600" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
        <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:white;stroke:red;stroke-width:2" />

    </svg>
</body>

路径 <path>

<body>
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="600" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <path d="M250 150 L150 350 L350 350 Z" />
    </svg>
</body>

代码解释：

  • 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
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

<body>
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="600" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <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:white;stroke:red;stroke-width:2" />
    </svg>
</body>

SVG 滤镜

在 SVG 中，可用的滤镜有：

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

SVG 高斯模糊

<body>
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="600" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="Gaussian_Blur">
                <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
            </filter>
        </defs>

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

    </svg>
</body>

代码解释：

  • <filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
  • filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
  • 滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
  • <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
  • in="SourceGraphic" 这个部分定义了由整个图像创建效果

<body>
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="600" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <filter id="Gaussian_Blur">
                <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
            </filter>
        </defs>

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

    </svg>
</body>

SVG 渐变

SVG 线性渐变

<body>
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="600" height="600" version="1.1" 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)" />
    </svg>
</body>

代码解释：

  • <linearGradient> 标签的 id 属性可为渐变定义一个唯一的名称
  • fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
  • <linearGradient> 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
  • 渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置。

<body>
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="600" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <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>

SVG 放射性渐变

<body>
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="600" height="600" version="1.1" 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)" />

    </svg>
</body>

代码解释：

  • <radialGradient> 标签的 id 属性可为渐变定义一个唯一的名称;
  • fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，
  • cx、cy 和 r 属性定义外圈，
  • fx 和 fy 定义内圈 渐变的颜色范围可由两种或多种颜色组成。
  • 每种颜色通过一个 <stop> 标签来规定。offset 属性用来定义渐变的开始和结束位置

 

<body>
    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <svg width="600" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <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>

*阿漓*
关注
  • 23
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
SVG 学习
aguang5241的博客
10-11 363
SVG 在 HTML 中 使用embed标签 <embed src="circle.svg" type="image/svg+xml" /> 使用object标签 <object data="circle.svg" type="image/svg+xml"></object> 使用iframe标签 <iframe src="circle1.svg"&...
SVG学习
Harrietjia的博客
03-13 520
font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。线性渐变的stop节点通过指定位置的offset属性和stop-color属性来说明在渐变特定位置上是什么颜色，偏移量应该始终从0%（0）开始到100%（1） 结束。如果后面存在额外的字符，耗尽他们最后一个字符之后放置的位置。
svg 学习
cauyyl的博客
07-16 241
The SVG Canvas, Coordinate System, And Viewport
SVG学习链接
XianRenShan的博客
09-12 468
SVG学习链接： http://know.webhek.com/svg/svg-home.html http://www.w3school.com.cn/svg/svg_intro.asp http://www.runoob.com/svg/svg-reference.html
svg学习笔记
S_B_Girl的博客
12-28 388
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="b
svg学习过程
屈小康
04-14 155
1.svg的格式 svg的格式和png的格式不一样，png 的格式为二进制，而svg的格式为富文本格式。 2.语法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi
svg 学习记录之 viewBox 属性
weixin_43191327的博客
08-22 2372
首先可以想象 svg 标签是一个屏幕, viewBox 是一个截屏窗口大小, 而 rect 是截取窗口里面的内容, 当你截屏完成后, 你要把这个截取的图片放在一个名为 svg 的屏幕上, 这时候如果 viewBox 小于舞台大小, 那就要放大截图来铺满 svg, 如果 viewBox 大于 svg 的尺寸那就要缩小截图来达到铺满 svg 舞台。有 viewBox 的效果 , 现在的 viewBox 是远小区 svg 的宽高。有 viewBox 的效果 , 现在的 viewBox 是远大于 svg的宽高。
SVG学习-2
mjzhang1993的博客
03-10 455
SVG 学习笔记 - 2基本上是按照这套教程学习的SVG 中的坐标系统和坐标变换视野与世界 世界是无穷大的，视野是观察世界的一个矩形区域width height - 控制视窗，浏览器开辟出来用来渲染SVG内容的区域 SVG 代码 - 定义世界 viewBox, preserveAspectRatio - 控制视野，观看SVG的矩形区域红色代表视窗 <svg width="300" heig
SVG学习日志-入门
黄烁的个人博客
03-20 205
SVG学习日志-入门 在此,先引用W3C教程中的一段话, 与其他图像格式相比，使用 SVG 的优势在于： SVG 可被非常多的工具读取和修改（比如记事本） SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大 SVG 图像中的文本是可选的，同时也是可搜...
svg 学习 资料
06-27
svg 学习 资料
svg 学习 资料 合集
06-27
svg 学习 资料 合集
HTML，css效果收集,SVG学习.zip
最新发布
03-13
html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目源码 供学习参考 html 学习资料 项目资料 项目...
html5+svg学习指南之SVG基础知识
09-28
本文主要介绍了SVG的基础概念等知识，以及SVG与CANVAS的区别，最后给出了一个简单示例，方便大家更好的了解SVG可缩放矢量图形。推荐给大家。
SVG学习示例
04-26
NULL 博文链接：https://871656094.iteye.com/blog/2355343
SVG学习手册
04-15
我自己学习过程中总结的有关svg的内容，放到这里与大家共同分享
SVG学习教程 SVG学习教程
07-24
SVG学习教程.doc SVG学习教程 svg 学习 教程
很全面的svg学习资料
10-08
很全面的svg学习资料很全面的svg学习资料很全面的svg学习资料很全面的svg学习资料很全面的svg学习资料很全面的svg学习资料
svg6004 csdn
12-26
svg6004 csdn 是一家为技术人员提供学习和交流平台的网站。它拥有丰富的技术文章、视频教程和社区论坛，可以帮助用户学习和掌握最新的编程技术和知识。在这里，用户可以阅读来自各大行业专家的文章，学习他们的经验...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

*阿漓*

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值