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 334C153 334 151 334 151 334C151 339 153 344 156 344C164 344 171 339 171 334C171 322 164 314 156 314C142 314 131 322 131 334C131 350 142 364 156 364C175 364 191 350 191 334C191 311 175 294 156 294C131 294 111 311 111 334C111 361 131 384 156 384C186 384 211 361 211 334C211 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>

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【事故总结】Mybatis-Wrapper导致的生产事故

【事故总结】Mybatis-Wrapper导致的生产事故

近期遭遇了一次生产环境的严重告警&#xff0c;涉及慢接口和CPU过载。经过排查&#xff0c;发现问题根源在于一段使用MyBatis的查询代码。当传入空列表作为查询条件时&#xff0c;MyBatis会忽略该条件&#xff0c;导致全表扫描&#xff0c;进而引发系统资源耗尽和频繁的Full GC…
阅读更多...
《别让猴子跳回背上》——管理者的时间管理

《别让猴子跳回背上》——管理者的时间管理

讲时间管理的书很多&#xff0c;但这本是专门讲给管理者的时间管理。 在职场中&#xff0c;许多管理者都会碰到工作计划执行不下去、组织目标难于实现的问题&#xff0c;搭进了自己所有可以支配的时间&#xff0c;仍旧是焦头烂额&#xff0c;顾此失彼&#xff1b;而下属则因为…
阅读更多...
PowerShell Instal 一键部署TeamCity

PowerShell Instal 一键部署TeamCity

前言 TeamCity 是一个通用的 CI/CD 软件平台，可实现灵活的工作流程、协作和开发实践。允许在您的 DevOps 流程中成功实现持续集成、持续交付和持续部署。 系统支持 Centos7，8，9/Redhat7，8，9及复刻系列系统支持 Windows 10,11,2012,2016,2019,2022高版本建议使用9系列系统…
阅读更多...
LabVIEW各版本安装指南

LabVIEW各版本安装指南

链接地址如下&#xff1a; https://pan.baidu.com/s/1NF9hY03bApwwpI-WVHGlZg?pwd0531 1.鼠标右击【LabVIEW2023】压缩包&#xff08;win11及以上系统需先点击“显示更多选项”&#xff09;【解压到 LabVIEW2023】。 2.打开解压后的文件夹&#xff0c;双击打开【Setup】文件…
阅读更多...
C语言 volatile关键字

C语言 volatile关键字

volatile关键字介绍 volatile 是一个关键字&#xff0c;用于修饰变量&#xff0c;表示该变量是易变的&#xff0c;即可能在任何时候被意外地改变。在多线程编程中&#xff0c;当多个线程同时访问同一个变量时&#xff0c;由于线程之间的交互和优化&#xff0c;可能会导致变量的…
阅读更多...
【挑战全网最易懂】深度强化学习 --- 零基础指南

【挑战全网最易懂】深度强化学习 --- 零基础指南

深度强化学习介绍、概念 强化学习介绍离散场景&#xff0c;使用行为价值方法连续场景&#xff0c;使用概率分布方法实时反馈连续场景&#xff1a;使用概率分布 行为价值方法 强化学习六要素设计奖励函数设计评论家策略学习与优化 算法路径深度 Q 网络 DQN演员-评论家算法&…
阅读更多...
echarts常见的一些大屏示意图及配置项【好看】

echarts常见的一些大屏示意图及配置项【好看】

双立体柱状图 示意图&#xff1a; 配置&#xff1a; initData() {let sideData [220, 182, 191, 234, 290, 330]let sideData1 [100, 110, 120, 134, 190, 230]let nameList [结算能力数, 结算金额]let yAxisData [(金额/亿元), (能力数/个)]let xData [1, 2, 3, 4, 5…
阅读更多...
Anolis安装Jdk保姆级教学

Anolis安装Jdk保姆级教学

前言 欢迎来到本博客&#xff0c;我们将带领你完成在Anolis操作系统上安装Java Development Kit&#xff08;JDK&#xff09;的详细过程。Anolis操作系统是一款基于Linux的轻量级操作系统&#xff0c;专为容器和云原生应用而设计。在Anolis上安装JDK将为你提供一个稳定、高效的…
阅读更多...
1万亿元国债支持水利、应急行业，钡铼智能终端积极助力提升防灾抗洪建设需求

1万亿元国债支持水利、应急行业，钡铼智能终端积极助力提升防灾抗洪建设需求

10月24日&#xff0c;十四届全国人大常委会第六次会议审议通过了国务院关于增加发行国债支持灾后恢复重建和提升防灾减灾救灾能力的议案。为贯彻落实中共中央政治局常委会会议精神&#xff0c;以强有力的资金保障有关工作落实&#xff0c;中央财政将在今年四季度增发2023年国债…
阅读更多...
证明：切线垂直于半径

证明：切线垂直于半径

证明&#xff1a; 切线垂直于过切点的半径。 下面是网上最简单的证明方法。 证明&#xff1a; 利用反证法。 如下图所示&#xff0c;直线AB和圆O切于点A&#xff0c;假设OA 不垂直于 AB&#xff0c;而 O B ⊥ A B OB \perp AB OB⊥AB&#xff0c;则 ∠ O B A 90 \angle OB…
阅读更多...
十、方法调用的底层实现

十、方法调用的底层实现

一、方法调用分析&#xff08;main方法是JVM指令执行的起点&#xff09; 我们写的代码&#xff0c;经过编译、经过类加载的各种阶段&#xff0c;进入了 JVM 的运行时数据区。但作为程序员真正关心是代码的执行&#xff0c;代码的执行其实本质上是方法的执行&#xff0c;站在 JV…
阅读更多...
6、LLaVA

6、LLaVA

简介 LLaVA官网 LLaVA使用Vicuna(LLaMA-2)作为LLM f ϕ ( ⋅ ) f_\phi() fϕ​(⋅)&#xff0c;使用预训练的CLIP图像编码器 ViT-L/14 g ( X v ) g(X_v) g(Xv​)。 输入图像 X v X_v Xv​&#xff0c;首先获取feature Z v g ( X v ) Z_vg(X_v) Zv​g(Xv​)。考虑到最后一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023