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属性定义各个点的坐标,其中xy坐标之间用逗号分别,多个坐标之间用空格分开

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基础图形与参数的更多相关文章

  1. D3.js学习笔记(六)——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  2. SVG 基础图形

    SVG 基础图形 SVG包含了以下的基础图形元素: 矩形(包括可选的圆角),使用<rect>元素创建 圆形,使用<circle>元素创建 椭圆形,使用<ellipse&g ...

  3. SVG基础图形和D3.js

    使用D3.js画一个SVG 的 圆 circle 可以使用如下代码创建: <svg width="50" height="50"> <circ ...

  4. SVG 学习<一>基础图形及线段

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  5. SVG.js 基础图形绘制整理(二)

    一.折线 var draw = SVG('svg1').size(300, 300); //画折线 //使用字符串点 // var polyline=draw.polyline('0,0 100,50 ...

  6. SVG基础绘图实例

    SVG可缩放矢量图(Scalable Vector Graphics),是使用 XML 来描述二维图形和绘图程序的语言,图像在放大或改变尺寸的情况下其图形质量不会有所损失,是万维网联盟的标准. 下面整 ...

  7. 2019-10-23-C#-从零开始写-SharpDx-应用-绘制基础图形

    title author date CreateTime categories C# 从零开始写 SharpDx 应用 绘制基础图形 lindexi 2019-10-23 21:16:35 +0800 ...

  8. C# 从零开始写 SharpDx 应用 绘制基础图形

    本文告诉大家通过 SharpDx 画出简单的 2D 界面 本文属于 SharpDx 系列 博客,建议从头开始读 本文分为两步,第一步是初始化,第二步才是画界面 初始化 先创建 RenderForm 用 ...

  9. HTML5 可缩放矢量图形(1)—SVG基础

    参考文档1 SVG基础 SVG介绍 概念:SVG 是使用 XML 来描述二维图形和绘图程序的语言.(理解就是一个在网页上使用笔画图的过程) 什么是SVG SVG 指可伸缩矢量图形 (Scalable ...

随机推荐

  1. HBase 在HDFS 上的目录树

         总所周知,HBase 是天生就是架设在 HDFS 上,在这个分布式文件系统中,HBase 是怎么去构建自己的目录树的呢? 这里只介绍系统级别的目录树. 一.0.94-cdh4.2.1版本 系 ...

  2. 树莓派 HC-SRO4超声波测距模块的使用

    先上个图 这个模块的针脚跟之前玩的那三个有所区别,除了VCC和GND两个针脚,还多了两个Trig和Echo针脚,分别是输出和输入,Trig我接的是20针脚,Echo是21 该模块的工作原理为,先向TR ...

  3. CSS3实现倒计时

    CSS3实现倒计时小程序,界面如下: 代码如下: <style> body,html{ margin:0px; height:100%; } body{background: #000; ...

  4. java攻城狮之路(Android篇)--BroadcastReceiver&Service

    四大组件:activity 显示. contentProvider 对外暴露自己的数据给其他的应用程序.BroadcastReceiver 广播接收者,必须指定要接收的广播类型.必须明确的指定acti ...

  5. ruby -- 进阶学习(十五)friendly_id配置

    实现效果:http://127.0.0.1:3000/article/1  =>  http://127.0.0.1:3000/article/书名 (1)Rails 4.0的friendly_ ...

  6. UBUNTU上的GIT SERVER

    Git是一个开源的版本控制系统,由Linus Torvalds主导,用于支持Linux内核开发.每一个Git工作目录,都是一个完整的代码库,包含所有的提交历史.有能力跟踪所有的代码版本,而不会去依赖于 ...

  7. publishing failed with multiple errors

    背景: 1.使用maven package工程 2. 在eclipse中添加server运行时 publishing failed with multiple errors resource is o ...

  8. Understanding G1 GC Logs--转载

    原文地址:https://blogs.oracle.com/poonam/entry/understanding_g1_gc_logs Understanding G1 GC Logs By Poon ...

  9. nginx 更新提示端口占用的解决办法

    最近更新ubuntu下的nginx,报了以下的错误, [emerg]: bind() to 0.0.0.0:80 failed (98: Address already in use) 可以看到,80 ...

  10. Spring基础—— 在 Spring Config 中使用外部属性文件

    一.在 Spring Config 文件中配置 Bean 时,有时候需要在 Bean 的配置里添加 系统部署的细节信息, 如文件路径,数据源配置信息.而这些部署细节实际上需要在配置文件外部来定义. 二 ...