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.mzph.cn/news/584122.shtml

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

相关文章

OpenCV入门01:图像处理简介/图像的基础操作

OpenCV入门01:图像处理简介/图像的基础操作

项目开源&#xff0c;地址&#xff1a;https://gitee.com/zccbbg/opencv_study 文章目录 图像处理简介灰度图像二值图像彩色图 opencv 介绍图像基础操作图像读取与显示绘制几何图形图像的属性其他操作算数操作加法混合 图像色彩空间转换 图像处理简介 灰度图像 ● 灰度图像是…
阅读更多...
VIOOVI干货分享：生产标准工时的计算与观测次数确认

VIOOVI干货分享：生产标准工时的计算与观测次数确认

在制造业中&#xff0c;生产标准工时是一个关键指标&#xff0c;它可以帮助企业确定生产效率、评估员工绩效以及优化生产流程。本文将介绍生产标准工时的计算方法&#xff0c;并探讨如何确认观测次数&#xff0c;以充分利用ECRS工时分析软件。 一、生产标准工时的计算 生产标准…
阅读更多...
【WPF.NET开发】对象生存期事件

【WPF.NET开发】对象生存期事件

本文内容 先决条件视觉对象的生存期事件其他生存期事件 在所有对象的生存期内&#xff0c;Microsoft .NET 托管代码中的所有对象都会经历“创建”、“使用”和“销毁”的阶段。 当关于这些阶段的通知出现在对象上时&#xff0c;Windows Presentation Foundation (WPF) 会通过…
阅读更多...
售后客服日常回复必备的话术

售后客服日常回复必备的话术

致歉安抚通用 1.非常抱歉耽误您宝贵的时间了&#xff0c;这边给您查询一下&#xff0c;请稍等。 2.非常抱歉&#xff0c;给您添麻烦了。这边为您转接售后专员给您处理&#xff0c;请亲稍等。 3.影响到您的购物体验万分抱歉。 4.这边都会给您尽心解决的呢。 5.我非常理解您…
阅读更多...
算法：加油站

算法：加油站

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 一、问题描述 二、原始解法 总结 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、问题描述 在一条环路上有N个加油站&#xff0c;其中第…
阅读更多...
深度解析高防产品---游戏盾

深度解析高防产品---游戏盾

游戏盾是针对游戏行业所推出的高度可定制的网络安全解决方案&#xff0c;游戏盾是高防产品系列中针对游戏行业的安全解决方案。游戏盾专为游戏行业定制&#xff0c;针对性解决游戏行业中复杂的DDoS攻击、游戏CC攻击等问题。游戏盾通过分布式的抗D节点&#xff0c;可以防御TB级大…
阅读更多...
@PersistenceContext和@Autowired在EntityManager上应用的不同

@PersistenceContext和@Autowired在EntityManager上应用的不同

首先PersistenceContext是jpa专有的注解&#xff0c;而Autowired是spring自带的注释 上方图片的意思就是EntityManager不是线程安全的&#xff0c;当多个请求进来的时候&#xff0c;spring会创建多个线程&#xff0c;而PersistenceContext就是用来为每个线程创建一个EntityMana…
阅读更多...
AI渲染：改变图像和视频制作的技术革命

AI渲染：改变图像和视频制作的技术革命

随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;其应用领域已经覆盖了从医疗、教育到娱乐、艺术等各个行业。其中&#xff0c;AI在图像和视频制作领域的应用尤为引人注目&#xff0c;而AI渲染则是这一领域中的一颗璀璨明珠。AI渲染利用人工智能算法对图像和…
阅读更多...
智能外呼系统全新升级，携手企业迈向高效转化新时代

智能外呼系统全新升级，携手企业迈向高效转化新时代

智能外呼系统已成为企业提升业务效率和转化率的重要工具。随着人工智能技术的不断进步&#xff0c;智能外呼系统迎来了全面升级&#xff0c;旨在进一步助力企业优化客户沟通流程&#xff0c;提高业务转化效率。 新升级的智能外呼系统采用了更先进的自然语言处理技术&#xff0c…
阅读更多...
Linux free命令使用教程（free指令）（查看内存、系统内存、内存占用、内存使用情况）

Linux free命令使用教程（free指令）（查看内存、系统内存、内存占用、内存使用情况）

文章目录 Linux free命令使用教程1. free命令简介2. free命令选项2.1 显示单位&#xff08;free -b、free -k、free -m、free -g&#xff09;2.2 使用人类可读的格式&#xff08;free -h&#xff09;2.3 显示总计数&#xff08;free -t&#xff09;2.4 连续监视内存使用 3. 解析…
阅读更多...
新疆老人扶梯摔倒铁路民警秒速救援 揭秘富维智能识别跌倒技术

新疆老人扶梯摔倒铁路民警秒速救援 揭秘富维智能识别跌倒技术

近日&#xff0c;吐鲁番北站进站口一位年长的乘客在火车站的扶梯上突然失去平衡摔倒了&#xff0c;紧张的一幕在铁路民警的快速反应下得到了及时的处理。这位民警的敏捷和专业救援能力赢得了大家的称赞&#xff0c;同时也让我们思考&#xff1a;如何更好地及时报警这类事故的发…
阅读更多...
【强化学习】基于蒙特卡洛MC与时序差分TD的简易21点游戏应用

【强化学习】基于蒙特卡洛MC与时序差分TD的简易21点游戏应用

1. 本文将强化学习方法&#xff08;MC、Sarsa、Q learning&#xff09;应用于“S21点的简单纸牌游戏”。 类似于Sutton和Barto的21点游戏示例&#xff0c;但请注意&#xff0c;纸牌游戏的规则是不同且非标准的。 2. 为方便描述&#xff0c;过程使用代码截图&#xff0c;文末附链…
阅读更多...
马斯克谈六西格玛：管理质量与火箭科学如何相辅相成

马斯克谈六西格玛：管理质量与火箭科学如何相辅相成

如果你问我&#xff0c;作为一个有志于送人类上火星的家伙&#xff0c;六西格玛管理有没有用&#xff1f;我会说&#xff0c;如果把火箭控制的精度与六西格玛得到的生产质量相比&#xff0c;你会发现两者都追求同一件事&#xff1a;接近零缺陷的完美。 六西格玛不只是一组工具…
阅读更多...
elasticsearch系列七：聚合查询

elasticsearch系列七：聚合查询

概述 今天咱们来看下es中的聚合查询&#xff0c;在es中聚合查询分为三大类bucket、metrics、pipeline&#xff0c;每一大类下又有十几种小类&#xff0c;咱们各举例集中&#xff0c;有兴许的同学可以参考官网&#xff1a;https://www.elastic.co/guide/en/elasticsearch/refere…
阅读更多...
np.copy()是深拷贝还是浅拷贝

np.copy()是深拷贝还是浅拷贝

np.copy到底是深拷贝还是浅拷贝 实验1. 拷贝矩阵2. 修改m的值3. 修改拷贝矩阵的值 官方文档参考文档 最近在用numpy的拷贝操作&#xff0c;发现网上对np.copy()究竟是深拷贝还是浅拷贝说法不一致&#xff0c;因此记录一下。 总结&#xff1a;如果numpy array是一个简单的数组&…
阅读更多...
yolov7中添加fppi评价指标

yolov7中添加fppi评价指标

参考&#xff1a;https://blog.csdn.net/liuhao3285/article/details/135233281?spm1001.2014.3001.5502 fppifp/image_num yolov7中增加FPPI FPPI实现 yolo7中的评价指标实现位于utils/metrics.py中&#xff0c;我们只需要参照mAP指标在其中增加FPPI的内容即可&#xff1a;…
阅读更多...
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​)。考虑到最后一…
阅读更多...
复试 || 就业day03(2023.12.29)算法篇

复试 || 就业day03(2023.12.29)算法篇

文章目录 前言同构字符串存在重复元素有效的字母异位词丢失的数字单词规律 前言 &#x1f4ab;你好&#xff0c;我是辰chen&#xff0c;本文旨在准备考研复试或就业 &#x1f4ab;文章题目大多来自于 leetcode&#xff0c;当然也可能来自洛谷或其他刷题平台 &#x1f4ab;欢迎大…
阅读更多...
【Linux系统编程二十五】：线程概念(Linux中的轻量级进程)

【Linux系统编程二十五】：线程概念(Linux中的轻量级进程)

【Linux系统编程二十五】&#xff1a;线程概念(Linux中的轻量级进程&#xff09; 一.线程的概念1.地址空间是资源窗口 二.线程初步理解1.进程执行分支(内部运行)2.执行粒度更细3.重构进程概念&#xff1a;系统资源分配的基本实体4.重构线程概念&#xff1a;系统调度的基本单位5…
阅读更多...
springcloud中使用openfeign来优化接口调用

springcloud中使用openfeign来优化接口调用

简单介绍在springcloud中使用openfeign来优化接口调用 目录 一、引入依赖二、为服务提供者编写openfeign接口三、服务消费者调用定义的openfeign接口四、项目结构五、日志级别配置1、通过配置类进行全局配置2、通过配置类进行局部配置3、通过配置文件配置 一、引入依赖 <!-…
阅读更多...
最新文章

Copyright @ 2022~2023