SVG基础图形与参数
SVG是什么
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用来定义WEB上使用的矢量图
- SVG 使用 XML 格式定义图形
- SVG 图像在缩放时其图形质量不会有所损失
- SVG 是W3C推荐的
- SVG 与诸如 DOM和 XSL 之类的W3C标准是一个整体
SVG的优势
- SVG 可被非常多的工具读取和修改(比如记事本)
- SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。
- SVG 是可缩放的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
以上摘抄自百度百科。
好了,进入正题。
SVG里预定义的形状有以下7种:
- 矩形 <rect>
- 圆形 <circle>
- 椭圆 <ellipse>
- 直线 <line>
- 折线 <polyline>
- 多边形 <polygon>
- 路径 <path>
有共用的属性,也有特有的属性,先说特性。
1、矩形 <rect>
x y 定义坐标,相对于svg画布的左边和上边的距离(不带单位默认为px,其他属性都是这样子)
width height 定义宽高
rx ry 定义圆角半径
2、圆形 <circle />
cx cy r 定义圆心坐标半径
3、椭圆 <ellipse />
cx cy rx ry 相比圆形,椭圆有两个半径(横向半径和纵向半径)
4、直线 <line />
x1 y1 x2 y2 定义起始点和结束点的坐标
5、折线 <polyline />
points
属性定义各个点的坐标,其中x
和y
坐标之间用逗号分别,多个坐标之间用空格分开
6、多边形 <polygon />
和折线一样,只是这个会闭合。也是使用points属性定义各个点的坐标,然后会自动闭合。
7、路径 <path />
路径有点复杂,一系列的指令,所以要借助软件像AI导出SVG文件就好了。
下面的命令可用于路径数据:
- M = moveto
- L = lineto
- H = horizontal lineto
- V = vertical lineto
- C = curveto
- S = smooth curveto
- Q = quadratic Belzier curve
- T = smooth quadratic Belzier curveto
- A = elliptical Arc
- Z = closepath
注:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
共有的一些属性:
fill 填充颜色
stroke 定义图形或文本的边线颜色
stroke-width 定义图形或文本边线的宽度
stroke-linecap 定义线条端点的样子
butt 啥都没,老样子(平底)
round 圆的
square 方的,但是这是在原有的平头基础上多出了一截长方形
stroke-dasharray 创建虚线,两个数字,分别是实线和空白的长度
也可以这样扩展,但数字的个数要为偶数,表名实线空白相间
stroke-linejoin 描边转角的表现方式
miter 直角
round 圆角
bevel 平角
stroke-dashoffset 表示虚线的起始偏移
SVG基础图形与参数的更多相关文章
- D3.js学习笔记(六)——SVG基础图形和D3.js
目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...
- SVG 基础图形
SVG 基础图形 SVG包含了以下的基础图形元素: 矩形(包括可选的圆角),使用<rect>元素创建 圆形,使用<circle>元素创建 椭圆形,使用<ellipse&g ...
- SVG基础图形和D3.js
使用D3.js画一个SVG 的 圆 circle 可以使用如下代码创建: <svg width="50" height="50"> <circ ...
- SVG 学习<一>基础图形及线段
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- SVG.js 基础图形绘制整理(二)
一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...
- SVG基础绘图实例
SVG可缩放矢量图(Scalable Vector Graphics),是使用 XML 来描述二维图形和绘图程序的语言,图像在放大或改变尺寸的情况下其图形质量不会有所损失,是万维网联盟的标准. 下面整 ...
- 2019-10-23-C#-从零开始写-SharpDx-应用-绘制基础图形
title author date CreateTime categories C# 从零开始写 SharpDx 应用 绘制基础图形 lindexi 2019-10-23 21:16:35 +0800 ...
- C# 从零开始写 SharpDx 应用 绘制基础图形
本文告诉大家通过 SharpDx 画出简单的 2D 界面 本文属于 SharpDx 系列 博客,建议从头开始读 本文分为两步,第一步是初始化,第二步才是画界面 初始化 先创建 RenderForm 用 ...
- HTML5 可缩放矢量图形(1)—SVG基础
参考文档1 SVG基础 SVG介绍 概念:SVG 是使用 XML 来描述二维图形和绘图程序的语言.(理解就是一个在网页上使用笔画图的过程) 什么是SVG SVG 指可伸缩矢量图形 (Scalable ...
随机推荐
- SQLite 入门教程 (终端)命令
一.基本简介 SQLite 是一个自持的(self-contained).无服务器的.零配置的.事务型的关系型数据库引擎.因为他很小,所以也可以作为嵌入式数据库内建在你的应用程序中.SQLite 被应 ...
- win平台,apache通过web访问svn
上个月用php写一个在线打包lua变成luac,碰到个权限问题.pysvn无法更新.网上搜了好半天都找不到解决方法.最好还是自己解决了. 解决方法也很简单,找到aphache服务,提权限就行了.lin ...
- Part 1: Running Oracle E-Business Suite on Oracle Cloud
You can now run Oracle E-Business Suite on Oracle Cloud. EBS customers can take advantage of rapid ...
- Linux 技巧:让进程在后台可靠运行的几种方法(转)
下面举了一些例子, 您可以针对不同的场景选择不同的方式来处理这个问题. nohup/setsid/& 场景: 如果只是临时有一个命令需要长时间运行,什么方法能最简便的保证它在后台稳定运行呢? ...
- mysql同主机数据库复制
我们有时候需要在测试环境和生产环境下做交换.以下可以快速的复制数据库,支持大容量(1G以上) 1.将database_DEV数据库导成database_DEV.contents.gz压缩文件 mysq ...
- Session丢失的解决办法小结
最近在做ASP.NET项目时,测试网站老是取不出Session中的值,在网上搜索了一下,找到一些解决方法,记录在这里.最后使用存储在StateServer中的办法解决了问题. SessionState ...
- iframe无刷新跨域上传文件并获取返回值
通常我们会有一个统一的上传接口,这个接口会被其他的服务调用.如果出现不同域,还需要无刷新上传文件,并且获取返回值,这就有点麻烦了.比如,新浪微博启用了新域名www.weibo.com,但接口还是使用原 ...
- 小printf的故事(未完待续)
小printf的故事 这篇文章的原文来自:英文原文作者仿照<小王子>中的情节,生动有趣的阐述了小printf从编程小白到专家的成长历程.这是我第一次尝试翻译文章,肯定有很多不足之处,情不要 ...
- python——第一天
两种循环: for x in …… while range(n) 生成整数序列,并且是从0开始一直到n-1的整数 raw_input() 读取的内容永远以字符串的形式,必须先用 int() 把字符串转 ...
- Parameter配置文件获取
public class ConfigInfo { public static ParametersHelper Parameters { get { return new ParametersHel ...