SVG 可缩放矢量图形

简介: SVG 可缩放矢量图形

SVG Scalable Vector Graphics

SVG 使用 XML 格式定义图像

内嵌使用

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle
    cx="100"
    cy="50"
    r="40"
    stroke="black"
    stroke-width="3"
    fill="red"
    />
</svg>

外部引用

<embed src="circle.svg" type="image/svg+xml" />

示例

1、矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<rect
x="50"
y="20"
width="300"
height="100"
style="fill: rgb(0, 0, 255); stroke-width: 1; stroke: rgb(0, 0, 0);"
/>
</svg>

x 矩形到浏览器窗口左侧的距离

y 矩形到浏览器窗口顶端的距离

width 宽度

height 高度

fill 填充颜色

stroke-width 边框宽度

stroke 边框颜色


2、10 号字

 <svg xmlns="http://www.w3.org/2000/svg"; version="1.1">
<text fill="#000000" font-size="10" font-family="Verdana" x="0" y="10">
你好
</text>
</svg>

资源

SVG 教程 https://www.runoob.com/svg/svg-tutorial.html

SVG 在线编辑 https://c.runoob.com/more/svgeditor/

            </div>
目录
相关文章
|
前端开发 Linux 网络安全
kali linux 网络渗透测试学习笔记(一)Nmap工具进行端口扫描
一.利用Nmap扫描网站服务器的端口开放情况首先打开我们的kali linux才做系统,再打开其命令行模式,输入:nmap www.csdn.net 如下图所示:   因此,通过这个结果可以表明csdn上的端口开放了80端口以及443端口吗,这两个端口都十分重要,因为80端口适用于给用户呈现出数据,给用户看网站用的,443端口也是一个比较重要的端口。
2590 0
|
存储 缓存 程序员
社交应用性能提升秘籍:推拉结合优化方案全解读!
大家好,我是小米,一名热爱技术分享的29岁程序员。本文将介绍我在个人项目中遇到的优化案例——“推拉结合”,解决用户在线状态管理和消息推送机制的问题。通过推拉结合策略,我们优化了用户体验并减轻了系统负担。希望对遇到类似挑战的开发者有所启发。欢迎关注我的微信公众号“软件求生”,获取更多技术干货!
233 9
|
传感器
水传感器的技术原理有哪些
水传感器通过多种技术原理检测水质,包括电导率测量、光学感应、化学反应和生物传感等方法,可监测pH值、溶解氧、浊度等参数。
|
Java 数据库连接 mybatis
mybatis 返回map
mybatis 返回map
338 0
登录next cloud出现,“我们检测到您的 IP 进行了多次无效登录尝试。因此,你的下一次登录最长会延迟30秒。”问题解决
登录next cloud出现,“我们检测到您的 IP 进行了多次无效登录尝试。因此,你的下一次登录最长会延迟30秒。”问题解决
1058 0
登录next cloud出现,“我们检测到您的 IP 进行了多次无效登录尝试。因此,你的下一次登录最长会延迟30秒。”问题解决
|
XML Java Maven
Maven POM
Maven的POM(Project Object Model)是项目的基本配置文件,以XML格式描述项目信息、依赖、插件及构建细节。包含groupId、artifactId、version等必填字段,用于定义项目唯一标识和构建路径。POM还涉及目标执行、项目profile、开发者列表及邮件列表信息。在工作时,Maven通过读取POM获取配置并执行任务。
|
存储 传感器 SQL
智慧校园系统开发(一)
TK智慧校园管理系统主要用来管理校内学生、老师、班级、年级的相关信息,进行老师和学生信息记录和统计的功能,而这些信息是校园信息化建设的核心基础业务数据。
528 1
|
Docker Python 容器
Jupyter notebook 安装教程(2022.9.24更新)
Jupyter notebook 安装教程(2022.9.24更新)
669 0
|
JavaScript
从0搭建Vue3组件库:button组件
从0搭建Vue3组件库:button组件
656 0