svg常用元素和属性
1. 介绍
SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics)。其可以直接被插入到网页 DOM 中,甚至作为CSS背景属性等,且无论放大多少倍,图像都不会失真。D3.js 正是操作各种svg 元素,将他们拼接成一幅幅精美的图件,因此了解常用的svg元素和属性是学习 D3.js 的必要条件。
2.常用的svg标签
<svg>
标签
svg
标签是顶层标签,所有 svg 标签和代码都必须放在<svg>
标签中,width
和 height
属性可指定画布大小,xmlns
属性则是用于声明命名空间,防止来自不同技术的元素发生冲突。viewBox
则是指定视口位置和大小,其属性值由 4 个数字组成,分别是视口左上角的横坐标和纵坐标、视口的宽度和高度(svg 元素的左上角坐标默认为0, 0
)
<svg width="100" height="100" viewBox="50 50 50 50" xmlns="http://www.w3.org/2000/svg">svg代码写在这里.....
</svg>
<line>
标签
line
标签用于绘制一条直线,众所周知,一条直线由两个点确定,因此该标签具有 x1
、y1
、x2
、y2
属性,分别表示线段起始点和终点的横纵坐标。
<line x1="0" y1="0" x2="100" y2="100" />
<rect>
标签
rect
标签则用于绘制一个矩形,其 x
和 y
属性分别指定了矩形左上角顶点的横纵坐标,而 width
和 height
属性则指定了矩形的宽度和高度。
<rect x="0" y="0" height="100" width="100" />
<polygon>
标签
polygon
标签用于绘制一个多边形(必须具备三个顶点或以上),其 points
属性指定了多边形每个顶点的坐标,横坐标与纵坐标之间与逗号分隔,点与点之间则用空格分隔。
<polygon points="0,0 100,0 100,100 0,100 0,0"/>
<circle>
标签
circle
标签用于绘制一个圆形,具有cx
、cy
和r
属性,分别代表圆心的横纵坐标以及圆形的半径。
<circle cx="50" cy="50" r="25" />
<ellipse>
标签
ellipse
标签用于绘制一个椭圆,具有cx
、cy
、rx
和ry
属性,分别代表圆心横纵坐标以及椭圆的横纵向轴半径
<ellipse cx="50" cy="50" ry="40" rx="20" />
<path>
标签
path
标签用于绘制路径,其是 svg 基本形状中最强大的一个,你可以用它创建线条,曲线,弧形,圆等各种形状,其具有 d
属性,用于指定一系列绘制的命令,命令后面接坐标。
常用命令包括:M
(移动绘制点到某坐标)、L
(绘制一条直线)、H
(绘制一条水平线)、V
(绘制一条竖线)、Q
(绘制一条二次贝塞尔曲线)、C
(绘制一条三次贝塞尔曲线)、Z
(闭合)。以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
从坐标(150, 0)绘制一条直线到坐标(75,200),然后再从(75,200)绘制直线到坐标(225,200)
,最后闭合回到(150, 0)
<path d="M150 0 L75 200 L225 200 Z" />
因此 path
标签最后呈现什么样子,完全取决于你的一系列命令,不同的形状绘图命令可以简单也可以很复杂,但是不用担心,D3.js 的内置的一些形状 API 能自动生成 path
标签,无需你手动书写 d
属性。
<text>
标签
顾名思义,text
标签用于绘制文本,其具有x
、y
、dx
、dy
和 text-anchor
属性,分别代表文本标签的的横纵坐标、文本水平方向和垂直方向的偏移量,以及文本的对齐方式
在坐标(100, 100)绘制一句文本,且文本对齐方式为居中对齐
<text x="100" y="100" text-anchor="middle">Hello World</text>
<g>
标签
g
标签用于将多个形状捆绑一个组(group),在 g
标签上定义的属性,会被其所有的子元素继承,添加到g元素上的变换也会应用到其所有的子元素上
将所有圆都充填为蓝色<g fill="blue"><circle cx="25" cy="25" r="20" id="1"/><circle cx="50" cy="50" r="20" id="2"/></g>
<image>
标签
image
标签用于插入图片,width
和 height
属性指定图片大小,xmlns:xlink
属性指定图片 url
<image xlink:href="path/to/image.jpg" width="100" height="100"/>
以上就是 svg 最常用的几个标签,除此之外,svg 还具有 <defs>
、<use>
、<pattern>
、<animate>
等众多标签,但由于日常使用较少,到用的时候去查找就好了,在此就不每个都介绍了,有兴趣的同学请参考这里
3.svg标签常用属性
id
属性
svg 元素的唯一标识,与 html 元素类似
class
属性
svg 元素的 class 标识,常用于css样式设置,与 html 元素类似
stroke
属性
定义 svg 元素的描边颜色,例如线条、文本等描边颜色
stroke-width
属性
定义 svg 元素的描边宽度
stroke-opacity
属性
定义 svg 元素的描边透明度
fill
属性
定义 svg 元素的填充颜色
fill-opacity
属性
定义 svg 元素的填充透明度
transform
属性
定义 svg 元素的变换,包括移动、旋转、放缩等,与CSS类似,例如
将圆顺时针旋转30度,向左平移30,向下平移40,缩小成原来的0.5倍
<circle cx="25" cy="25" r="20" transform="rotate(30) translate(-30 40) scale(0.5)" />
以上就是 svg 元素最常用的几个属性,还有一些属性用的较少,等需要的时候再去查找就好了,而对于字体颜色、大小等是通过CSS样式设置的
如果觉得这篇文章帮助了您,请打赏一个小红包鼓励作者继续创作哦!!!
svg常用元素和属性相关推荐
- HTML5所有常用元素和属性
HTML5所有常用元素和属性 - <!--...-->注释- <html>根元素- <head>页面头部分,可以包含如下子元素> <script> ...
- SVG常用元素标签列表
第一次系统化学习svg,整理了一些常用的SVG元素标签(没有整理滤镜相关)仅供参考学习. defs:用于定义所有可能再次引用的图形元素.在defs元素中定义的图形元素不会直接呈现.你可以在你的视口的任 ...
- html元素和属性,HTML常用元素和属性(一)
1:基础元素 定义注释 根元素 页面标题主题部分,属性可以指定id,class,style,onload,onunload,onclick,ondblclick,onmousedown,onmouse ...
- HTML笔记一,部分常用的元素与属性
HTML中的常用元素与属性 <hr>:定义一条水平线 <div>:定义文档中的节,默认换行 <span>:定义一个节,但不换行 对文字的格式化元素: <b&g ...
- js操作元素:改变元素内容有两种方式: interText 和 innerHTML的区别, 常用的元素的属性操作, 仿电脑系统时间问好 ,表单元素的属性操作 ,案例:仿京东显示隐藏密码 ,样式属性操作
文章目录 操作元素 改变元素内容有两种方式: interText 和 innerHTML的区别 常用的元素的属性操作 案例:仿电脑系统时间问好 表单元素的属性操作 案例:仿京东显示隐藏密码 样式属性操 ...
- html语言元素属性大全,HTML常用标签及属性
什么是HTML HTML基本语法 常用标签及属性 链接 文本标记 表格 列表 表单 结构标记 什么是HTML HyperText Markup Language,超级文本标记语言 HTML 并不是编程 ...
- 100个HTML标记语言的常用标签及属性
以下是100个HTML标记语言的常用标签及属性,并且附带有示例: 1. <!DOCTYPE>:定义文档类型.示例:<!DOCTYPE html> 2. <html> ...
- 第60天:js常用访问CSS属性的方法
一. js 常用访问CSS 属性的方法 我们访问得到css 属性,比较常用的有两种: 1. 利用点语法 box.style.width box.style.top 点语法可以得到 ...
- 怎样设置html的元素属性,Jquery怎么设置元素的属性和样式?
Jquery怎么设置元素的属性和样式?下面本篇文章给大家介绍一下使用jQuery操作元素属性与样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 元素属性和Dom属性 对于下 ...
最新文章
- JSP内置对象-request
- 在开发的过程如何使用源码
- 【学习笔记】SAP CO模块概念信息(下)
- window server 2012 IE10 增强的安全设置 如何关闭
- armv7的linux系统,CentOS 7(1611) for ARM(armhfp)发布
- qt弹框输入密码_Android仿支付宝密码输入框
- Spring Boot 2 快速教程:WebFlux 集成 Thymeleaf(五)
- 机器学习 - [集成学习]Bagging算法的编程实现
- DLLPasswordFilterImplant:DLL密码过滤器
- 记一次大量数据导入导出SAP系统实验
- 张宇基础30讲 第17讲-元函数积分学基础知识
- win10用计算机分区,win10怎么分区,详细教您win10怎么对磁盘进行分区
- 含有n个元素的整型数组,将这个n个元素重新组合,求出最小的数,如{321,3,32},最小的数为321323...
- linux 安装pkg文件,Linux的pkg-config命令
- BootStrap 图标修改
- openwrt mysql改密码_openwrt的路由器重置root密码
- GLSurfaceView
- b500k带开关电位器内部构造_b500k开关摇杆电位器,直滑电位器103
- app卡在启动页面android,app启动一直停留在启动页面
- Android 10 终于来了!增加了不少新特性