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

news2024/11/23 19:33:49

本专栏是汇集了一些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>
   <polyline
            points="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.coloradmin.cn/o/1231626.html

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

相关文章

Win10 开始菜单、微软app和设置都打不开(未解决)

环境&#xff1a; Win10专业版 问题描述&#xff1a; Win10 开始菜单、微软app和设置都打不开,桌面个性话打开就报错&#xff0c;打开个性化该文件没有与之关联的程序来执行该操作 解决方案&#xff1a; 一般造成原因是MS-Settings文件系统错误 1.先重启电脑&#xff08;重…

吐槽一个 R package :DSS

TMD&#xff01;&#xff01;&#xff01; 前言 最近在整理WGBS分析的流程&#xff0c;下游需要找 Differentially Methylated Loci (DML) / Region (DMR)&#xff0c;类似普通转录组中的差异分析。之前看的一篇文章提到一个R package &#xff1a; DSS&#xff0c;看Biocond…

直播美颜SDK对比评测:技术原理与应用实践

直播行业蓬勃发展&#xff0c;其中&#xff0c;美颜滤镜技术在直播中扮演着至关重要的角色。本文将深入探讨不同直播美颜SDK的技术原理&#xff0c;并通过对比评测它们在实际应用中的表现&#xff0c;以揭示各SDK的优劣之处。 一、背景 随着直播技术的不断进步&#xff0c;直…

又欲又撩人,基于新版Bert-vits2V2.0.2音色模型雷电将军八重神子一键推理整合包分享

Bert-vits2项目近期炸裂更新&#xff0c;放出了v2.0.2版本的代码&#xff0c;修正了存在于2.0先前版本的重大bug&#xff0c;并且重炼了底模&#xff0c;本次更新是即1.1.1版本后最重大的更新&#xff0c;支持了三语言训练及混合合成&#xff0c;并且做到向下兼容&#xff0c;可…

新一代车载以太网传输技术研讨会(AEM)顺利圆满举行

时间定格在2023年11月17日&#xff0c;新一代车载以太网传输技术研讨会在东莞国际会展中心举行。来自相关的的企业几百家。当然&#xff0c;深圳维信仪器作为主办方&#xff08;AEM线束测试仪中国区总平台&#xff09;举优质的线束测试设备&#xff0c;不论是手持线束测试&…

在VSCode创建vue项目,出现“因为在此系统上禁止运行脚本”问题

问题&#xff1a;vue : 无法加载文件 C:\Users\***\***\Roaming\npm\vue.ps1&#xff0c;因为在此系统上禁止运行脚本。有关详细信息&#xff0c;请参阅 ht tps:/go.microsoft.com/fwlink/?LinkID135170 中的 about_Execution_Policies。 所在位置 行:1 字符: 1 解决&#xff…

安装oracle19c卡在安装界面

我在个人window10电脑上安装 Oracle 19c 时遇到问题。解压后的数据库文件放在没有中文的文件目录下面&#xff0c;用管理员用户启动 CMD 窗口进行安装&#xff0c;但随后卡在菜单上。 取消安装之后去任务管理器中的服务里停掉OracleRemExecServiceV2服务。 用管理员运行CMD…

Threejs_06 多材质的实现

Threejs 同一个几何体如何实现多材质呢&#xff1f; 多材质的实现 1.使用索引绘制一个几何体 //创建几何体(三角形) const geometry new THREE.BufferGeometry();//使用索引绘制 (两个共用的) const vertices new Float32Array([-1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, 1…

解决Tomcat中文乱码

cmd乱码如图&#xff1a; idea中运行Tomcat控制台出现乱码&#xff1a; 解决办法&#xff1a; 找到两个idea的vmoptions配置文件&#xff0c;在文件中追加-Dfile.encodingUTF-8 -Dfile.encodingUTF-8保存退出。 重启idea重新运行Tomcat&#xff1a; maven、tomcat 超级详…

世微 电动车摩托车灯 5-80V 1.2A 一切二降压恒流驱动器AP2915

产品描述 AP2915 是一款可以一路灯串切换两路灯串的降压恒流驱动器,高效率、外围简单、内置功率管&#xff0c;适用于5-80V 输入的高精度降压 LED 恒流驱动芯片。内置功率管输出最大功率可达 12W&#xff0c;最大电流 1.2A。AP2915 一路灯亮切换两路灯亮&#xff0c;其中一路灯…

qsort

qsort void*修饰后pv不能1&#xff0c;-1也不能解引用 例子 /* qsort example */ #include <stdio.h> /* printf */ #include <stdlib.h> /* qsort */int values[] { 40, 10, 100, 90, 20, 25 };int compare (const void * a, const void * b) {return…

【CVE-2023-4357】Chrome-XXE 任意文件读取漏洞复现及原理解析

官方文档 https://bugs.chromium.org/p/chromium/issues/detail?id1458911 漏洞描述 Short description: Libxslt is the default XSL library used in WebKit based browsers such as chrome, safari etc. Libxslt allows external entities inside documents that are lo…

IP地理位置定位技术:保护网络安全的新利器

随着互联网的普及和网络活动的日益频繁&#xff0c;网络安全问题越来越受到人们的关注。恶意流量攻击、网络欺诈等网络安全威胁层出不穷&#xff0c;如何准确识别和定位网络攻击者成为一项重要任务。在这个背景下&#xff0c;IP地理位置定位技术应运而生&#xff0c;为网络安全…

(五)什么是Vite——冷启动时vite做了什么(依赖、预构建)

vite分享ppt&#xff0c;感兴趣的可以下载&#xff1a; ​​​​​​​Vite分享、原理介绍ppt 什么是vite系列目录&#xff1a; &#xff08;一&#xff09;什么是Vite——vite介绍与使用-CSDN博客 &#xff08;二&#xff09;什么是Vite——Vite 和 Webpack 区别&#xff0…

Springcloud可视化物联网智慧工地云SaaS平台源码 支持二开和私有化部署

智慧工地平台围绕建筑施工人、物、事的安全管理为核心&#xff0c;对应研发了劳务实名制、视频监控、扬尘监测、起重机械安全监测、安全帽监测等功能一体化管理的解决方案。 智慧工地是聚焦工程施工现场&#xff0c;紧紧围绕人、机、料、法、环等关键要素&#xff0c;综合运用物…

网络参考模型与标准协议(一)

OSI参考模型 OSI 模型(Open Systems Interconnection Model)&#xff0c;由国际化标准组织ISO (TheInternational Organization for Standardization )收录在ISO 7489标准中并于1984年发布。 OSI参考模型又被称为七层模型&#xff0c;由下至上依次为: 物理层: 在设备之间传输比…

外卖小程序系统:数字化时代餐饮业的技术奇迹

在当今数字化时代&#xff0c;外卖小程序系统正以其强大的技术背后支持&#xff0c;成为餐饮业务的一项奇迹。这个系统不仅提供了便捷的点餐体验&#xff0c;更通过先进的技术手段&#xff0c;实现了高效订单处理、智能推荐以及实时配送追踪。下面&#xff0c;我们将深入探讨外…

【Python】问题描述:输入A、B,输出A+B。样例输入12 45样例输出57

1、问题描述 输入A、B&#xff0c;输出AB。 样例输入 12 45 样例输出 57 nums list(map(int,input().split(" "))) print(sum(nums))

单链表相关面试题--7.链表的回文结构

/* 解题思路&#xff1a; 此题可以先找到中间节点&#xff0c;然后把后半部分逆置&#xff0c;最近前后两部分一一比对&#xff0c;如果节点的值全部相同&#xff0c;则即为回文。 */ class PalindromeList { public:bool chkPalindrome(ListNode* A) {if (A NULL || A->ne…

【2023云栖】陈守元:阿里云开源大数据产品年度发布

本文根据 2023 云栖大会演讲实录整理而成&#xff0c;演讲信息如下&#xff1a; 演讲人&#xff1a;陈守元 | 阿里云计算平台事业部开源大数据产品总监 演讲主题&#xff1a;阿里云开源大数据产品年度发布 随着云计算的不断发展&#xff0c;未来数据处理和应用的趋势将围绕C…