SVG圆形 <circle>的示例代码

本专栏是汇集了一些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.mzph.cn/news/152633.shtml

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

相关文章

.NET 8.0 AOT 教程 和使用 和 .NET ORM 操作

NET AOT编译是一种.NET运行时的编译方式&#xff0c;它与传统的JIT编译方式不同。在传统的JIT编译中&#xff0c;.NET应用程序的代码在运行时才会被编译成本地机器码&#xff0c;而在AOT编译中&#xff0c;代码在运行之前就被提前编译成本地机器码。这样可以在代码运行的时候不…

键盘映射笔记

dumpkeys命令用于显示当前系统中定义的键盘映射表。它可以帮助用户查看和理解系统中的键盘布局和键盘映射规则。 当用户执行dumpkeys命令时&#xff0c;它会读取系统中的键盘映射表文件&#xff08;通常是/etc/keymaps或/etc/console/boottime.kmap.gz&#xff09;&#xff0c;…

Rust unix domain socket

先用起来再说 use std::io::prelude::*; use std::os::unix::net::UnixStream;fn main() {let mut stream: UnixStream;let mut buffer vec![0u8; 4096];match UnixStream::connect("/tmp/hello.world.serv") {Ok(handle) > {stream handle;match stream.write_…

【C#二开业务冠邑】通过界面查看数据来源

前言 重构框架&#xff08;CS【C#】转BS【Java】&#xff09;时&#xff0c;突然发现公司的代码和数据库&#xff0c;有部分都没有写注释&#xff0c;嘎嘎&#xff0c;这不非常影响开发效率&#xff0c;于是乎&#xff0c;开始帮公司整理表结构和数据来源&#xff0c;也从而加…

3D全景视角,足不出户感知真实场景的魅力

近年来&#xff0c;随着科技的快速发展&#xff0c;普通的平面静态视角已经无法满足我们了&#xff0c;不管是视角框架的限制还是片面的环境展示&#xff0c;都不足以让我们深入了解场景环境。随着VR全景技术的日益成熟&#xff0c;3D全景技术的出现为我们提供了全新的视觉体验…

【C++深度剖析学习总结】28 函数对象分析

1.客户需求 编写一个函数,满足三个需求 函数可以获得斐波那契数列每项的值 每调用一次返回一个值 函数可根据需要重复使用 for(int i =0; i<10; i++) { cout << fib() << endl; } 第一个解决方案 #include<iostream> #include<string> using na…

汽车标定技术--A2L格式分析

目录 1.A2L由来 2.A2L格式 2.1 PROJECT 2.2 MODULE中包含的内容 3. INCA和CANape兼容吗&#xff1f; 最近有朋友用Vector ASAP2Editor编译的A2L文件在INCA7.4中无法识别&#xff0c;我记得以前做的时候是可以识别的&#xff0c;难不成最近有什么变动吗&#xff1f;出于好…

Django 入门学习总结2 创建一个投票系统

通过学习&#xff0c;我们可以实现一个简单的投票系统。这个投票系统有两部分组成。 公共部分&#xff0c;公众可以查看和进行投票。管理员可以进行增加、删除、修改投票信息。 这里投票系统Python语言版本为3.10.13&#xff0c;Django Web框架版本为4.2.7。 投票系统的实现…

快速弄懂Python3.11中的新特性

Python 3.11 引入了许多新特性和改进&#xff0c;让我们逐一详细了解这些更新&#xff1a; 1. 更详细的错误消息 Python 3.11 在错误报告方面做出了显著改进&#xff0c;与 Python 3.10 相比&#xff0c;它提供了更详细的错误消息&#xff0c;能够指出表达式中具体哪个部分导…

系列二、Lock接口

一、多线程编程模板 线程 操作 资源类 高内聚 低耦合 二、实现步骤 1、创建资源类 2、资源类里创建同步方法、同步代码块 三、12306卖票程序 3.1、synchronized实现 3.1.1、Ticket /*** Author : 一叶浮萍归大海* Date: 2023/11/20 8:54* …

试用无线调试器PowerDebugger小记

试用无线调试器PowerDebugger小记 文章目录 试用无线调试器PowerDebugger小记引言准备软硬件环境PowerDebugger 无线调试器EVB-YTM32B1LE0-Q64 开发板 开始调试小结参考文献 引言 多年前调试智能车时&#xff0c;抱着电脑连着小车在跑道上一边跑一边看数据的经历&#xff0c;让…

计算机毕业设计选题推荐-家庭理财微信小程序/安卓APP-项目实战

✨作者主页&#xff1a;IT研究室✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Python…

Vue使用基本教程(基本介绍及对比,初步使用,构建项目,编辑器等)

一、Vue及与其他前端框架的异同。 Vue.js&#xff08;通常简称为Vue&#xff09;是一个用于构建用户界面的渐进式JavaScript框架。它专注于视图层&#xff0c;采用简单的API设计&#xff0c;使得开发者能够更轻松地构建交互式的单页面应用&#xff08;SPA&#xff09;和用户界…

leetcode:504. 七进制数

一、题目&#xff1a; 链接&#xff1a; 504. 七进制数 - 力扣&#xff08;LeetCode&#xff09; 函数原型&#xff1a; char* convertToBase7(int num) 二、思路 本题要将十进制数转换为二进制数&#xff0c;只要将十进制num数模7再除7&#xff0c;直到num等于0 每次将模7的结…

编写高效的消息传递代码-对消息进行降维

DGL优化了消息传递的内存消耗和计算速度。利用这些优化的一个常见实践是通过基于内置函数的 update_all() 来开发消息传递功能。 除此之外&#xff0c;考虑到某些图边的数量远远大于节点的数量&#xff0c;DGL建议避免不必要的从点到边的内存拷贝。对于某些情况&#xff0c;比…

hologres 索引与查询优化

hologres 优化部分 1 hologres 建表优化1.1 建表中的配置优化1.1 字典索引 dictionary_encoding_columns1.2 位图索引 bitmap_columns1.2.2 Bitmap和Clustering Key的区别 1.3 聚簇索引Clustering Key 1 hologres 建表优化 1.1 建表中的配置优化 根据 holo的 存储引擎部分的知…

【AI视野·今日Robot 机器人论文速览 第六十四期】Fri, 27 Oct 2023

AI视野今日CS.Robotics 机器人学论文速览 Fri, 27 Oct 2023 Totally 27 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers 6-DoF Stability Field via Diffusion Models Authors Takuma Yoneda, Tianchong Jiang, Gregory Shakhnarovich, Matthew R. …

JVM:内存模型、内存分配机制、内存分配冲突、JVM垃圾标记算法、JVM1.8增加元数据区缘由

文章目录 JVM 内存模型线程共享区&#xff1a;堆方法区(元空间) 线程私有区线程栈 本地方法栈程序计数器 为什么JDK1.8会增加对方法区的实现/为什么JDK1.8将方法区更改为元数据区JVM内存分配机制指针碰撞空闲列表 内存分配冲突CAS乐观锁解决TLAB解决 JVM垃圾标记算法1、引用计数…

PostgreSQL数据库结合内网穿透实现公网远程连接

文章目录 前言1. 安装postgreSQL2. 本地连接postgreSQL3. Windows 安装 cpolar4. 配置postgreSQL公网地址5. 公网postgreSQL访问6. 固定连接公网地址7. postgreSQL固定地址连接测试 前言 PostgreSQL是一个功能非常强大的关系型数据库管理系统&#xff08;RDBMS&#xff09;,下…

智能门禁刷脸照片格式gif、bmp,png转换,转换base64

随着刷脸闸机的普及&#xff0c;很多场所都使用了刷脸金闸机&#xff0c;很多时候对方传来的照片格式不对。 刷脸闸机对应的格式都是jpg 照片来源&#xff1a;访客手机上传&#xff0c;管理员上传&#xff0c;团队购票上传 在转换的语言很多&#xff0c;在网站中php使用较为…