SVG圆形 <circle>的示例代码

news2024/11/16 3:39:48

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

SVG使用 来创建圆形.

圆形规则

在这里插入图片描述

cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为(0, 0)。 r属性定义圆的半径。

效果图

在这里插入图片描述

源代码

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="150" cy="50" r="50" stroke="green" stroke-width="2" fill="yellow" />
</svg> 
 
</body>
</html>
							
							

SVG 的历史和优势

SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用
XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和
XSL 之类的 W3C 标准是一个整体

在 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/1231892.html

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

相关文章

【MySql】13- 实践篇(十一)

文章目录 1. 自增主键为什么不是连续的&#xff1f;1.1 自增值保存在哪儿&#xff1f;1.2 自增值修改机制1.2.1 自增值的修改时机1.2.2 自增值为什么不能回退? 1.3 自增锁的优化1.3.1 自增锁设计历史 2. Insert语句为何很多锁?2.1 insert … select 语句2.2 insert 循环写入2…

记录--alova组件使用方法(区别axios)

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 在我们写项目代码时&#xff0c;应该更加专注于业务逻辑的实现&#xff0c;而把定式代码交给js库或工程化自动处理&#xff0c;而我想说的是&#xff0c;请求逻辑其实也是可以继续简化的。 你可能会说…

npm install 下载不下来依赖解决方案

背景 最近在构建 前端自动化部署 的方案中发现了一个问题&#xff0c;就是我在npm install的时候&#xff0c;有时候成功&#xff0c;有时候不成功&#xff0c;而且什么代码也没发生更改&#xff0c;报错也就是那么几个错&#xff0c;所以在此也整理了一下遇到这种情况&#xf…

音视频同步笔记 - 以音频时间为基

音视频同步 - 以音频时间为基 上图介绍&#xff1a; 该图是以音频的时间为基&#xff0c;对视频播放时间的延迟控制方案&#xff0c;只调整视频的播放延时。delayTime是视频播放的延迟时间&#xff0c;初始值是1 / FPS * 1000 (ms)&#xff0c;如果FPS为25帧率&#xff0c;初始…

MySQL 备份和恢复

目录 一.MySQL数据库的备份的分类 1.1.数据备份的重要性 1.2.数据库备份的分类和备份策略 1.3.常见的备份方法 二.MySQL完全备份 2.1.什么是完全备份 2.2.完全备份的优缺点 2.3.实现物理冷备份与恢复 1&#xff09;实现流程 2&#xff09;前置准备 3&#xff09;实现…

Shell判断:模式匹配:case(一)

一、前言 shell编程中if和case都是用来做流控的。 二、case语法结构 case 变量 in 模式1&#xff09; 命令序列1 ;; 模式2&#xff09; 命令序列2 ;; 模式3&#xff09; 命令序列3 ;; *) 无匹配…

共享内存和信号量的配合机制

进程之间共享内存的机制&#xff0c;有了这个机制&#xff0c;两个进程可以像访问自己内存中的变量一样&#xff0c;访问共享内存的变量。但是同时问题也来了&#xff0c;当两个进程共享内存了&#xff0c;就会存在同时读写的问题&#xff0c;就需要对于共享的内存进行保护&…

数据结构--串的基本概念

目录 串的基本概念 串的定义 串与线性表对比 ​串的基本操作​ 串的比较 字符集编码 乱码问题​编辑 总结 ​串的存储结构 ​串的顺序存储​编辑 串的链式存储 串的基本操作 1、求字串 2、比较 3、定位操作 总结 串的基本概念 串的定义 串与线性表对比 串的…

无障碍功能更新,帮助残障人士轻松快捷完成日常事务

作者 / Google Products for All 团队高级总监 Eve Andersson 我们将与您分享一些全新的无障碍功能和部分更新&#xff0c;帮助您更轻松快捷地完成日常任务&#xff0c;让您不费吹灰之力就能自拍、查询步行路线或上网搜索等。我们最近在 Android 14 和 Wear OS 4 中推出了 Look…

软件测试/测试开发/人工智能丨基于Spark的分布式造数工具:加速大规模测试数据构建

随着软件开发规模的扩大&#xff0c;测试数据的构建变得越来越复杂&#xff0c;传统的造数方法难以应对大规模数据需求。本文将介绍如何使用Apache Spark构建分布式造数工具&#xff0c;以提升测试数据构建的效率和规模。 为什么选择Spark&#xff1f; 分布式计算&#xff1a;…

clickhouse分布式之弹性扩缩容的故事

现状 社区不支持喔&#xff0c;以后也不会有了。曾经尝试过&#xff0c;难道是是太难了&#xff0c;无法实现吗&#xff1f;因为他们企业版支持了&#xff0c;可能是利益相关吧&#xff0c;谁知道呢&#xff0c;毕竟开源也要赚钱&#xff0c;谁乐意一直付出没有回报呢。 社区…

60 权限提升-MYMSORA等SQL数据库提权

目录 数据库应用提权在权限提升中的意义WEB或本地环境如何探针数据库应用数据库提权权限用户密码收集等方法目前数据库提权对应的技术及方法等 演示案例Mysql数据库提权演示-脚本&MSF1.UDF提权知识点: (基于MYSQL调用命令执行函数&#xff09;读取数据库存储或备份文件 (了…

ubuntu20.04蓝牙连接airpods

ubuntu20.04蓝牙连接airpods 解禁蓝牙安装blueman设置模式连接上没有声音的问题 解禁蓝牙 sudo rmmod btusb sleep 1 sudo modprobe btusb sudo /etc/init.d/bluetooth restart安装blueman sudo apt install blueman sudo apt-get install pulseaudio-module-bluetooth sudo …

Ajax基础(应用场景|jquery实现Ajax|注意事项)

文章目录 一、Ajax简介二、基于jquery实现Ajax三、使用Ajax注意的问题1.Ajax不要与form表单同时提交2.后端响应格式问题3、使用了Ajax作为请求后的注意事项 一、Ajax简介 AJAX&#xff08;Asynchronous Javascript And XML&#xff09;翻译成中文就是“异步Javascript和XML”。…

STM32:OLED屏幕开发

一、OLED原理 所谓的屏幕就是由一个个小灯组成&#xff0c;每个小灯称之为一个像素。只要在屏幕上有选择地点亮一部分小灯&#xff0c;就可以显示我们想要的图案。所谓下分辨率就是屏幕上的小灯数量。常见单片机中常见的屏幕分辨率常见的就是128(列长)*64(行高)。如果每个小灯都…

从暗黑3D火炬之光技能系统说到-Laya非入门教学一~资源管理

我不知道那些喷Laya没有浏览器&#xff0c;嘲笑别人编辑器做不好&#xff0c;是什么水平&#xff1f; 首先目前国内除了WPS和飞书&#xff0c;就没有第三家公司能把编辑器做好。 要是一般的游戏开发者&#xff0c;如我&#xff0c;有一点点引擎代码&#xff08;某项目&#x…

C++快速入门 - 2(几分钟让你快速入门C++)

C快速入门 - 2 1. 内联函数1.1 概念1.2 特性 2. auto关键字(C11)2.1 类型别名思考2.2 auto简介2.3 auto的使用细则2.4 auto不能推导的场景 3. 基于范围的for循环(C11)3.1 范围for的语法3.2 范围for的使用条件 1. 内联函数 1.1 概念 以inline修饰的函数叫做内联函数&#xff0c…

三十分钟学会SCALA

SCALA Scala 是一种运行在 JVM上的函数式的面向对象语言。 Scala 是兼容的&#xff1a;兼容 Java&#xff0c;可以访问庞大的 Java 类库&#xff1b;Scala 是精简的&#xff1a;Scala 表达能力强&#xff0c;一行代码抵得上多行 Java 代码&#xff0c;开发速度快。可以让程序…

Redis轻松添加从节点:零阻塞、零烦恼,系统性能再飙升

点击上方蓝字关注我 生成环境的Redis有时需要替换或添加从节点&#xff0c;如果此时主库较大&#xff0c;添加从节点时将可能因为主节点在做bgsave数据备份时使得主库压力大&#xff0c;从而引起其他操作变慢&#xff0c;进而出现阻塞等操作。那么有什么方法可以尽最大程度地减…

【机器学习】034_多层感知机Part.2_从零实现多层感知机

一、解决XOR问题 1. 回顾XOR问题&#xff1a; 如图&#xff0c;如何对XOR面进行分割以划分四个输入 对应的输出 呢&#xff1f; 思路&#xff1a;采用两个分类器分类&#xff0c;每次分出两个输入 &#xff0c;再借助这两个分类从而分出 。 即采用同或运算&#xff0c;当两…