SVG直线 <line>与折线 <polyline>代码示例

本专栏是汇集了一些HTML常常被遗忘的知识,这里算是温故而知新,往往这些零碎的知识点,在你开发中能起到炸惊效果。我们每个人都没有过目不忘,过久不忘的本事,就让这一点点知识慢慢渗透你的脑海。
本专栏的风格是力求简洁明了。

SVG使用 画直线,使用 画折线。

直线规则

在这里插入图片描述

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

折线规则

在这里插入图片描述
元素是用于创建任何只有直线的形状。​ 图形的绘制是根据points的点坐标从左向右开始,如,对于points=“x1,y1 x2,y2 x3,y3 x4,y4”;图形从(x1,y1)开始,然后连接(x2,y2),在连接(x3,y3),再连接(x4,y4)

效果图

在这里插入图片描述

源代码

<!DOCTYPE html>
<html>
<body><svg xmlns="http://www.w3.org/2000/svg" version="1.1" ><line x1="40" y1="10" x2="200" y2="89" style="stroke:red;stroke-width:2"></line><polylinepoints="90,10 110,50 170,50 110,70 150,120 90,80 50,120 70,70 30,50 80,50"style="fill:none;stroke:burlywood;stroke-width:2;stroke-linejoin:round"></polyline></svg></body>
</html>

SVG 的历史和优势

在 2003 年一月,SVG 1.1 被确立为 W3C 标准。

参与定义 SVG 的组织有:Sun公司(已被Oracle公司收购)、Adobe、苹果公司、IBM 以及柯达。

与其他图像格式相比,使用 SVG 的优势在于:

SVG 可被非常多的工具读取和修改(比如记事本) SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。 SVG
是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印 SVG 可在图像质量不下降的情况下被放大 SVG
图像中的文本是可选的,同时也是可搜索的(很适合制作地图) SVG 可以与 JavaScript 技术一起运行 SVG 是开放的标准 SVG
文件是纯粹的 XML SVG 的主要竞争者是 Flash。

与 Flash 相比,SVG 最大的优势是与其他标准(比如 XSL 和 DOM)相兼容。而 Flash 则是未开源的私有技术。

结尾语

HTML是前端页面展示的骨架,应用无处不在,希望某个知识点就能帮助你,欢迎学习GIS的朋友一起交流。
《 Openlayers 综合示例200+ 》,
《 leaflet示例教程100+ 》,
《 Cesium示例教程100+》,
《MapboxGL示例教程100+》。

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

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

相关文章

多种方式解决交叉编译中glibc版本不兼容导致的编译问题(libc.so.6: version `GLIBC_xxx‘ not found问题)

目录 背景 开始动手! 第一种 第二种 第三种 背景 一个常见的问题就是: 拿到客户的开发板后需要验证自己本地搭建的交叉编译环境是否正确,这影响到后续的开发. glibc就是指libc.so.6这个动态库,libc.so.6软链接到实际的动态库. 开始动手! 在开发板上,如果有例子比如说可执…

iceoryx(冰羚)-通信中间件解析

iceoryx(冰羚)-简介 iceoryx(冰羚)-Architecture iceoryx(冰羚)-Service Discovery iceoryx(冰羚)-examples-callbacks iceoryx(冰羚)-Listener设计 [iceoryx(冰羚)-ipc消息通信] [iceoryx(冰羚)-共享内存实现]

Python程序设计基础2

第1关:HUT开学了: # 请在此添加代码 Name = input() # 输入学生的姓名 ########## Begin ########## print("|++++++++++++++++++++++|") print("| |") print("| Welcome to HUT |") print("| …

猫罐头品牌排行榜盘点!猫罐头哪个牌子好?

很多猫主人会发现他们家的猫咪可能对猫粮感到腻了&#xff0c;或者猫咪平时不爱喝水&#xff0c;还有一些主人可能会注意到猫咪太瘦了&#xff0c;想尝试给它们添加一些猫罐头&#xff0c;但又不确定如何选择。目前市场上的猫罐头品牌众多&#xff0c;确实让人有些困惑。那么&a…

K8S(一)

一、kubernetes 概述 1、kubernetes 基本介绍 kubernetes&#xff0c;简称 K8s&#xff0c;是用 8 代替 8 个字符“ubernete”而成的缩写。是一个开源的&#xff0c;用于管理云平台中多个主机上的容器化的应用&#xff0c;Kubernetes 的目标是让部署容器化的 应用简单并且高效…

LVGL 像文字一样,显示任意自定义符号

颜色可以在程序中设定,符号的C数组生成 这种应用非常适合类似汽车仪表盘中,有很多行业内特定符号需要显示的场景,而且符号需要根据情况改变颜色。网上这方面基本没有资料,本文是作者根据LVGL自定义字库的源代码修改来实现的。 使用工具: 设置:(根据液晶屏不同可能不同…

Python ElementTree 导出 xml 缺少 开头声明【Pymssql】使用cursor.fetchall()获取执行结果时中文乱码

python 在调用ElementTree的write方法写入xml时&#xff0c;参数里增加 encoding‘utf-8’ 以及 xml_declarationTrue et_root.write(filename.xml, encodingutf-8, xml_declarationTrue)中文乱码问题&#xff1a; Python的pymssql库连接SQL Sever&#xff0c;执行查询语句后&…

Git详解

Git是一个开源的分布式版本控制系统&#xff0c;常用于软件开发中对代码版本管理。Git具有版本控制、协作开发、分支管理、代码审查等功能&#xff0c;能够记录每次代码修改的内容和时间&#xff0c;并能够回滚到任意历史版本&#xff0c;方便团队协作和代码维护。 Git的基本概…

ubuntu20.04中编译zlib1.2.11(源码编译)

1. 安装cmake-gui 2. 下载并解压zlib-1.2.11&#xff0c;在解压得到的文件夹内部创建一个“build”文件夹。 3. 打开cmake-gui&#xff0c;配置zlib1.2.11的configure文件&#xff08;主要编辑build路径&#xff0c;安装路径&#xff0c;以及其他依赖选项&#xff09;&#x…

2311rust过程宏的示例

原文 Rust2018中的过程宏 在Rust2018版本中,我最喜欢的功能是过程宏.在Rust中,过程宏有着悠久而传奇的历史(并继续拥有传奇的未来!) 因为2018年版极大改善了定义和使用它们的体验. 什么是过程宏 过程宏是,在编译时用一段语法,生成新语法的函数.Rust2018中的过程宏有三个风格…

JS:给数字添加千分位符(每3位数用逗号隔开)

背景 如果一串数字的长度太长&#xff0c;就不方便阅读&#xff0c;因此可以采用分隔符对数字进行分割本文的分割规则是&#xff1a; 如果数字的长度大于等于5则进行分割&#xff0c;每3位数用逗号分割开 解决 数字可以分为&#xff1a;number类型的数字和字符串类型的数字&…

前端反卷计划-组件库-03-组件样式

Hi, 大家好&#xff01;我是程序员库里。 今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。 在接下来的日子&#xff0c;我会持续分享前端反卷计划中的每个知识点。 以下是前端反卷计划的内容&#xff1a; 目前这些内容持续更新到了我的 学习文档 中。感兴趣…

基于yolov5模型的200种鸟类检测识别分析系统

该专栏仅支持购买本专栏的同学学习使用,不支持以超级会员、VIP等形式使用,请谅解!【购买专栏后可选择其中一个完整源码项目】 本文是我新开设的专栏《完整源码项目实战》 的第十三篇全源码文章,包含数据集在内的所有资源,可以实现零基础上手入门学习。前面系列文章链接如下…

uniapp 防抖节流封装和使用

防抖(debounce)&#xff1a;定义一个时间&#xff0c;延迟n秒执行&#xff0c;n秒内再次调用&#xff0c;会重新计时&#xff0c;计时结束后才会再次执行 主要运用场景&#xff1a; 输入框实时搜索&#xff1a;在用户输入内容的过程中&#xff0c;使用防抖可以减少频繁的查询…

【ARM Trace32(劳特巴赫) 使用介绍 5 -- Trace32 ELF 文件加载介绍】

请阅读【ARM Coresight SoC-400/SoC-600 专栏导读】 文章目录 1.1 Trace32 加载符号表1.1.1 ELF 文件加载1.1.2 其它格式文件加载1.1.3 多个 ELF 的加载1.2 Trace32 UEFI 配置1.2.1 x86 32-BIT1.2.2 x86 64-BIT1.2.3 ARM1.1 Trace32 加载符号表 劳特巴赫 TRACE32 可以显示目标…

【每周一测】Java阶段三第三周学习

目录 1、事务四个隔离级别中&#xff0c;哪一个不能防止脏读 2、关于sleep()和wait()&#xff0c;以下描述错误的一项是&#xff08;&#xff09; 3、以下关于Servlet生命周期说法错误的是&#xff08; &#xff09; 4、下列概念解释说明错误的是 5、在 JWT 中&#xff0c…

数据结构与算法【二叉搜索树】Java实现

介绍 二叉搜索树&#xff08;也称二叉排序树&#xff09;是符合下面特征的二叉树&#xff1a; 树节点增加 key 属性&#xff0c;用来比较谁大谁小&#xff0c;key 不可以重复对于任意一个树节点&#xff0c;它的 key 比左子树的 key 都大&#xff0c;同时也比右子树的 key 都…

SQL-对比两表中数据

需求&#xff1a;表1中有多行id相同 select a.item_code, totalAmount , b.online_qty from (select item_code, sum(a.online_qty) as TotalAmountfrom serial_bal awhere a.wh_code SJ38group by item_code) a left join(select item_code,online_qtyfrom wh_bal bwhere b.…

ESP32 MicroPython 图像采集及拍照功能的使用⑧

ESP32 MicroPython 图像采集及拍照功能的使用⑧ 1、摄像头应用2、图像采集5、实验结果6、按键拍照7、实验内容8、参考代码9、实验结果 1、摄像头应用 小车配有摄像头&#xff0c;可以使用摄像头实现拍照、图像显示、图像识别等功能。小车已经内置有我们专门移植的摄像头驱动库…

[Docker]六.Docker自动部署nodejs以及golang项目

一.自动部署nodejs 1.创建node项目相关文件 app.js代码如下: var express require(express);var appexpress();app.get(/,function(req,res){res.send(首页update); }) app.get(/news,function(req,res){res.send(首页); })//docker做端口映射的时候不要指定ip app.listen(30…