svg学习

概念

  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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/277128.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

conda环境下Could not build wheels for dlib解决方法

1 问题描述 在安装模型运行的conda环境时&#xff0c;出现如下问题&#xff1a; Building wheels for collected packages: basicsr, face-alignment, dlib, ffmpy, filterpy, futureBuilding wheel for basicsr (setup.py) ... doneCreated wheel for basicsr: filenamebasi…

mysql树查询和时间段查询

本文目录 文章目录 案例1&#xff1a;MySQL树形结构查询案例2&#xff1a;MySQL查询一段时间内的所有日期 摘要 案例1&#xff1a;MySQL树形结构查询 在页面开发过程中&#xff0c;如图一所示的树形控件很常见&#xff0c;而大多数情况下&#xff0c;树形控件中需要显示的数据…

【温故而知新】vue运用之探讨下单页面应用(SPA)与多页面应用(MPA)

一、概念 1.单页面应用SPA(Single page application) Vue单页面应用是一种采用Vue.js框架开发的Web应用程序,它仅有一个HTML文件,通过前端路由实现页面的切换和渲染。与传统的多页面应用相比,Vue单页面应用在用户体验和开发效率方面有着明显的优势。 在Vue单页面应用中…

【微服务核心】MyBatis Plus

MyBatis Plus 文章目录 MyBatis Plus1. 简介2. 入门使用3. 核心功能3.1 CRUD 接口3.1.1 Mapper CRUD 接口3.1.2 Service CRUD 接口 3.2 条件构造器3.3 分页插件3.4 Mybatis-Plus 注解 4. 拓展4.1 逻辑删除4.2 MybatisX快速开发插件 5. 插件5.1 [分页插件](#page)5.2 乐观锁插件…

从0到1快速入门ETLCloud

一、ETLCloud的介绍 ETL是将业务系统的数据经过抽取&#xff08;Extract&#xff09;、清洗转换&#xff08;Transform&#xff09;之后加载&#xff08;Load&#xff09;到数据仓库的过程&#xff0c;目的是将企业中的分散、凌乱、标准不统一的数据整合到一起&#xff0c;为企…

[AI编程]AI辅助编程助手-亚马逊AI 编程助手 Amazon CodeWhisperer

亚马逊AI 编程助手 Amazon CodeWhisperer 是一种基于人工智能技术的编程辅助工具&#xff0c;旨在帮助开发人员更高效地编写代码。它可以提供实时的代码建议、自动补全和错误检查&#xff0c;帮助优化代码质量和提高编程效率。 Amazon CodeWhisperer 使用了自然语言处理和机器…

Redis管道

问题引出 Redis是一种基于客户端-服务端模型以及请求/响应协议的TCP服务。一个请求会遵循以下步骤&#xff1a; 1 客户端向服务端发送命令分四步(发送命令→命令排队→命令执行→返回结果)&#xff0c;并监听Socket返回&#xff0c;通常以阻塞模式等待服务端响应。 2 服务端…

Ubuntu20.04 上启用 VCAN 用作本地调试

目录 一、启用本机的 VCAN​ 编辑 1.1 加载本机的 vcan 1.2 添加本机的 vcan0 1.3 查看添加的 vcan0 1.4 开启本机的 vcan0 1.5 关闭本机的 vcan0 1.6 删除本机的 vcan0 二、测试本机的 VCAN 2.1 CAN 发送数据 代码 2.2 CAN 接收数据 代码 2.3 CMakeLists.…

PgSQL技术内幕 - ereport ERROR跳转机制

PgSQL技术内幕 - ereport ERROR跳转机制 使用客户端执行SQL的时候经常遇到报ERROR错误&#xff0c;然后SQL语句就退出了。当然&#xff0c;事务也会回滚掉。本文我们看下它是如何做到退出SQL语句并回滚事务的。 1、以insert一个numeric类型值为例 表一个字段为numeric(10,2)类型…

电脑报错“kernelbase.dll”文件缺失,软件游戏无法启动的解决方法

很多小伙伴留言说&#xff0c;每次自己要游戏或软件的时候&#xff0c;电脑就会弹出报错框&#xff0c;不知道应该怎么办&#xff1f; 其实&#xff0c;Windows报错提示已经说明了&#xff0c;程序找不到名为“kernelbase.dll”的文件&#xff0c;需要重新安装修复这个问题。 …

ssm基于JavaEE的智能实时疫情监管服务平台的设计与实现+jsp论文

摘 要 社会发展日新月异&#xff0c;用计算机应用实现数据管理功能已经算是很完善的了&#xff0c;但是随着移动互联网的到来&#xff0c;处理信息不再受制于地理位置的限制&#xff0c;处理信息及时高效&#xff0c;备受人们的喜爱。本次开发一套智能实时疫情监管服务平台有管…

C#中的Attribute详解(上)

C#中的Attribute详解&#xff08;上&#xff09; 一、Attribute是什么二、Attribute的作用三、Attribute与注释的区别四、系统Attribute范例1、如果不使用Attribute&#xff0c;为了区分这四类静态方法&#xff0c;我们只能通过注释来说明&#xff0c;但这样做会给系统带来很多…

VD6283TX环境光传感器(2)----移植闪烁频率代码

VD6283TX环境光传感器----2.移植闪烁频率代码 闪烁定义视频教学样品申请源码下载参考代码硬件准备开发板设置生成STM32CUBEMX串口配置IIC配置X-CUBE-ALSADC使用定时器触发采样KEIL配置FFT代码配置app_x-cube-als.c需要添加函数演示结果 闪烁定义 光学闪烁是指人造光源产生的光…

极智嘉加快出海发展步伐,可靠产品方案获客户认可

2023年&#xff0c;国内本土企业加快出海征程&#xff0c;不少企业在出海发展中表现出了优越的集团实力与创新的产品优势&#xff0c;有力彰显了我国先进的科技研发实力。作为全球仓储机器人引领者&#xff0c;极智嘉&#xff08;Geek&#xff09;也在不断加快出海发展步伐&…

Talk | 北京大学博士生汪海洋:通向3D感知大模型的前置方案

本期为TechBeat人工智能社区第559期线上Talk。 北京时间12月28日(周四)20:00&#xff0c;北京大学博士生—汪海洋的Talk已准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “通向3D感知大模型的前置方案”&#xff0c;介绍了他的团队在3D视觉大模型的前置方…

2023中国企业级存储市场:整体韧性成长,领域此消彼长

多年之后回头看&#xff0c;2023年也许是中国企业级存储市场标志性的一年。 后疫情时代的开启&#xff0c;中国数字经济快速发展、数据产业方兴未艾&#xff0c;为数据存储市场带来了前所未有的活力&#xff1b;与此同时&#xff0c;外部环境的不确定性骤增&#xff0c;人工智…

乘势而上开新年!2024深圳深圳户外家具及休闲用品展览会三月开幕

中国户外家具市场在九十年代末开始崭露头角&#xff0c;随着国家经济的腾飞&#xff0c;尤其是房地产行业的迅猛发展&#xff0c;加上现代商业模式的建立和完善&#xff0c;产品和需求都以惊人的速度在发展。无论是国际知名品牌&#xff0c;还是国内的专业户外家具生产企业&…

【开源学习】ThingsBoard -- 基本配置与使用

【开源学习】ThingsBoard -- 基本配置与使用 租户及客户管理租户及租户账号管理租户管理租户创建租户修改租户删除 租户账号管理租户账号创建租户账号修改租户账号删除 客户及客户账号管理客户管理客户创建客户修改客户删除 客户用户管理客户用户创建客户用户修改客户用户删除 …

进行VMware日志管理

随着公司转向虚拟化其 IT 空间&#xff0c;虚拟环境日志监控正在占据日志管理的很大一部分,除了确保网络安全外&#xff0c;虚拟机日志监控还有助于管理虚拟化工具&#xff0c;这是最复杂的任务之一。 对虚拟环境日志的监控分析 当今公司中最受欢迎的虚拟平台之一是 VMware。…

qml listview 刷新不及时问题

我在用qml listview 做界面&#xff0c; C 做model时&#xff0c; 往model中添加数据时&#xff0c; listview界面没有及时的更新 问题处理 发现 手动下拉或者上拉 listview界面会显示出来&#xff0c; 改变窗口的宽度也能显示出来 在model改变的时候 调用方法flick(…