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://xiahunao.cn/news/2661620.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

polar CTF上传

polar CTF上传

WEB-上传 一、查看题目信息 二、漏洞分析 经过上传测试发现&#xff0c;这题过滤掉了<?&#xff0c;这样正常的一句话木马就没法上传&#xff0c;这里可以用utf-16编码绕过。因为utf-16占utf-8的两倍长度&#xff0c;上传时默认检测为utf-8,从而就能绕过检测成功上传。 同…
阅读更多...
Paper Survey——NeRF SLAM

Paper Survey——NeRF SLAM

NeRF SLAM&#xff08;Neural Radiance Fields Simultaneous Localization and Mapping&#xff09;是一种结合神经辐射场&#xff08;NeRF&#xff09;和SLAM&#xff08;Simultaneous Localization and Mapping&#xff09;的先进技术&#xff0c;用于实时地构建三维环境地图…
阅读更多...
redis 从0到1完整学习 （十一）：RedisObject 之 String 类型

redis 从0到1完整学习 （十一）：RedisObject 之 String 类型

文章目录 1. 引言2. redis 源码下载3. redisObject 管理 String 类型的数据结构4. 参考 1. 引言 前情提要&#xff1a; 《redis 从0到1完整学习 &#xff08;一&#xff09;&#xff1a;安装&初识 redis》 《redis 从0到1完整学习 &#xff08;二&#xff09;&#xff1a;…
阅读更多...
ERROR: No matching distribution found for torch==1.12.0+cu113

ERROR: No matching distribution found for torch==1.12.0+cu113

原因 pip install torch1.12.0cu113用pip安装torch时&#xff0c;出现&#xff1a; ERROR: No matching distribution found for torch1.12.0cu113好像不少用清华源的会出现这个问题 解决办法 pytorch官网&#xff1a;https://pytorch.org/get-started/previous-versions/ …
阅读更多...
certum的ip证书购买流程

certum的ip证书购买流程

Certum是成立于欧洲的CA认证机构&#xff0c;经过二十几年的发展Certum已经成为欧洲知名的CA认证机构之一&#xff0c;拥有广泛的客户群体和合作伙伴。IP证书是Certum为只有公网IP地址的网站准备的数字加密服务。今天就随SSL盾小编了解购买Certum旗下的IP证书流程。 第一步&am…
阅读更多...
分享72个NodeJs项目源码总有一个是你想要的

分享72个NodeJs项目源码总有一个是你想要的

分享72个NodeJs项目源码总有一个是你想要的 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 链接&#xff1a;https://pan.baidu.com/s/1_bzxbmBlN8ga4-Ci1I0-0w?pwd6666 提取码&#xff1a;6666 项目名称 A lottery webapp …
阅读更多...
惟客数据昆仑-开发云成功开源了！让研发更简单高效

惟客数据昆仑-开发云成功开源了！让研发更简单高效

​近期&#xff0c;WakeData惟客数据产品——昆仑-开发云成功开源。 今年4月&#xff0c;惟客数据完成了新一轮产品能力升级&#xff0c;与战略伙伴联合研发具有私有化部署能力的行业大模型 WakeMind 。 昆仑-开发云在可视化领域建模的基础上也引入了 WakeMind 的能力&#x…
阅读更多...
英文建筑图纸翻译工程图纸翻译

英文建筑图纸翻译工程图纸翻译

建筑图纸是以图形和文字为语言&#xff0c;详细描绘了工程建筑、机械、设备等结构、形状、尺寸及其他要求。对于建筑图纸翻译&#xff0c;表达必须清楚准确。那么&#xff0c;如何确保英文建筑图纸翻译工程图纸翻译的准确性&#xff1f; 首先&#xff0c;我们需要深入了解建筑图…
阅读更多...
#define定义宏

#define定义宏

#define的定义范围 #define不光可以定义变量&#xff0c;常量&#xff0c;还可以定义几乎所有的东西&#xff0c;因为#define可以定义一串代码&#xff08;即宏&#xff09;&#xff0c;所以包含在代码中的东西都能被定义。 #define定义宏 定义是宏名必须于它的参数括号紧挨&am…
阅读更多...
校园跑腿小程序源码系统：取快递+寄快递+食堂超市跑腿 带完整的搭建教程

校园跑腿小程序源码系统：取快递+寄快递+食堂超市跑腿 带完整的搭建教程

现如今&#xff0c;越来越多的校园生活服务需求涌现出来。为了满足学生们的日常需求&#xff0c;校园跑腿小程序应运而生。这款小程序集成了取快递、寄快递、食堂超市跑腿等功能&#xff0c;为学生们提供了一个方便、快捷的生活服务平台。 以下是部分代码的示例&#xff1a; 系…
阅读更多...
使用RFC跳过权限校验的方法

使用RFC跳过权限校验的方法

1、业务背景 由于业务流程的复杂性&#xff0c;用户往往只具备部分功能的权限&#xff0c;导致在操作自开发程序时出现权限问题。例如前台限制了用户对销售订单的修改&#xff0c;而自开发功能中又涉及单据修改&#xff0c;此时一味限制权限&#xff0c;则无法正常使用功能。 2…
阅读更多...
API 开放平台项目（已整理，已废弃）

API 开放平台项目（已整理，已废弃）

项目大纲 前端 React 18Ant Design Pro 5.x 脚手架Ant Design & Procomponents 组件库Umi 4 前端框架OpenAPI 前端代码生成 后端 Java Spring BootMySQL 数据库MyBatis-Plus 及 MyBatis X 自动生成API 签名认证&#xff08;Http 调用&#xff09;Spring Boot Starter&#…
阅读更多...
L1-070：吃火锅

L1-070：吃火锅

以上图片来自微信朋友圈&#xff1a;这种天气你有什么破事打电话给我基本没用。但是如果你说“吃火锅”&#xff0c;那就厉害了&#xff0c;我们的故事就开始了。 本题要求你实现一个程序&#xff0c;自动检查你朋友给你发来的信息里有没有 chi1 huo3 guo1。 输入格式&#xff…
阅读更多...
nestjs入门教程系列(三):动态路由到底该怎么用

nestjs入门教程系列(三):动态路由到底该怎么用

如何获取前端请求中的参数 引子 我们在处理前端发送过来的请求时&#xff0c;需要访问客户端的request信息&#xff0c;那么我们该怎么操作呢?由于nestjs提供对底层平台的访问即express&#xff0c;所以我们可以通过注入的方式来方位请求对象 TIPS:需要从nestjs/common包里…
阅读更多...
旅行旅游研学线路景点门票特产周边小程序开源版开发

旅行旅游研学线路景点门票特产周边小程序开源版开发

旅行旅游研学线路景点门票特产周边小程序开源版开发 以下是旅行旅游研学线路景点门票特产周边小程序开源版开发的功能列表&#xff1a; 首页&#xff1a; 展示热门线路和推荐景点信息提供搜索功能&#xff0c;用户可以通过关键词搜索线路、景点、特产等显示当前位置和附近的景…
阅读更多...
wish店铺的审核周期是多久？wish排名规则是什么？-站斧浏览器

wish店铺的审核周期是多久？wish排名规则是什么？-站斧浏览器

wish店铺的审核周期是多久&#xff1f; 在开设新的Wish店铺或者新增产品时&#xff0c;Wish会对店铺和产品进行审核&#xff0c;确保它们符合平台的规定和要求。然而&#xff0c;Wish并没有明确说明店铺审核的具体周期&#xff0c;审核时间会因各种因素而有所不同。 1.新店铺…
阅读更多...
SEM扫描电镜成像质量影响因素

SEM扫描电镜成像质量影响因素

本文介绍影响扫描电镜图像质量的因素及其对图像质量的影响&#xff0c;分别从加速电压、扫描速度和信噪比、束斑直径、探针电流、消像散校正、工作距离以及反差对比等分析图像质量的变化原因&#xff0c;提出提高图像质量的方法。 扫描电子显微镜是&#xff08;Scanning El…
阅读更多...
LangChain（0.0.340）官方文档十一：Agents之Agent Types

LangChain（0.0.340）官方文档十一：Agents之Agent Types

LangChain官网、LangChain官方文档 、langchain Github、langchain API文档、llm-universe《Agent Types》、《Examples using AgentType》 文章目录 一、快速入门1.1 概念1.2 基本示例1.2.1 配置LangSmith1.2.2 使用LCEL语法创建Agents1.2.3 使用自定义runtime执行1.2.4 使用A…
阅读更多...
哪种猫粮比较好？超能打的5款主食冻干测评

哪种猫粮比较好？超能打的5款主食冻干测评

不知道从什么时候开始掀起一股冻干喂养风&#xff0c;各种查资料阅读文献发现冻干喂养是最适合忙碌地打工人的“生骨肉喂养”替代版&#xff0c;是最符合猫咪饮食天性的一种。很多养猫人纷纷开始冻干喂养&#xff0c;但对于主食冻干猫粮的选择就让很多猫奴犯了难在电商平台随便…
阅读更多...
AMR在机械行业中的运用十分广泛，提高了生产效率和降低了人力成本

AMR在机械行业中的运用十分广泛，提高了生产效率和降低了人力成本

随着智能制造和工业4.0的发展&#xff0c;AMR在机械行业中的运用十分广泛&#xff0c;成为推动机械行业智能化和自动化的重要技术装备之一。AMR的出现在很大程度上改变了传统的人工搬运方式&#xff0c;提高了生产效率和降低了人力成本。 在机械行业中&#xff0c;富唯智能AMR…
阅读更多...
最新文章

Copyright @ 2022~2023