svg文件是基于xml的矢量图,而canvas是基于html和js的位图。关于两者的比较,在粗就不赘述了。

1.  首先来上一个svg的基本结构:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"> <!-- svg的文件内容 --> </svg>

doctype要引入的是svg文件规范的DTD,svg标签的xmlns表示的是要遵循W3C的svg规范。

2. svg的引入方式

***可通过img标签引入

***可通过iframe标签引入

***可通过背景图片引入svg

***svg标签直接引入

   <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<circle cx="100" cy="100" r="40" fill="red"></circle>
</svg>

3. 常见的图形

(1) 圆形

<circle cx="100" cy="100" r="40" fill="transparent" stroke="black" stroke-width="5"></circle>
<circle cx="100" cy="100" r="40" style="fill:white;stroke:black;stroke-width:5;"></circle>

(2)方形(rx,ry设置圆角)

<rect width="200" height="200" x="100" y="100" fill="red" rx="30"></rect>

(3)直线(x1,y1,x2,y2为线段两个端点的坐标; stroke-opacity为透明度)

<line x1="50" y1="50" x2="200" y2="300" stroke="black" stroke-width="5" stroke-opacity
="0.5"></line>

4. svg常用标签

(1) 分组标签<g>

<!-- g标签上只能写所有图形共有的属性,位置移动常用transform属性 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<g transform="translate(200, 200)" stroke-width="5" stroke="red">
<circle r="40" fill="transparent"></circle>
<circle r="30" fill="transparent"></circle>
<circle r="20" fill="transparent"></circle>
<circle r="10" fill="transparent"></circle>
</g>
</svg>

效果如下

(2)文字标签<text>

    <!-- text-anchor="middle" 水平居中  strat 以尾部对齐  end以开始对齐 -->
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<g style="cursor:pointer">
<circle cx="200" cy="200" r="50" fill="transparent" stroke="red" stroke-width="5" ></circle>
<text x="200" y="208" font-size="20" text-anchor="middle">科鲁兹</text>
</g>
</svg>

5. 纯html实现基础svg结构组(实际开发中常用js动态生成,本次先来个基础的小demo)

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<g style="cursor:pointer">
<line x1="100" y1="100" x2="390" y2="200" stroke="#ccc"></line>
<line x1="100" y1="100" x2="390" y2="200" stroke="transparent" stroke-width="10"></line>
<rect x="235" y="140" fill="#999" width="20" height="20" rx="5"></rect>
<text x="245" y="158" fill="white" font-size="20" text-anchor="middle">?</text>
</g>
<g style="cursor:pointer">
<circle cx="100" cy="100" r="40" fill="white" stroke="red" stroke-width="3"></circle>
<text x="100" y="108" font-size="20" text-anchor="middle">易车网</text>
</g>
<g style="cursor:pointer">
<circle cx="390" cy="200" r="60" fill="white" stroke="red" stroke-width="3"></circle>
<text x="390" y="208" font-size="20" text-anchor="middle">科鲁兹</text>
</g>
</svg>

svg从入门到装逼(一)的更多相关文章

  1. 【Java框架型项目从入门到装逼】第七节 - 学生管理系统项目搭建

    本次的教程是打算用Spring,SpringMVC以及传统的jdbc技术来制作一个简单的增删改查项目,对用户信息进行增删改查,就这么简单. 1.新建项目 首先,打开eclipse,新建一个web项目. ...

  2. 【Java框架型项目从入门到装逼】第一节 - Spring框架 IOC的丧心病狂解说

    大家好,好久不见,今天我们来一起学习一下关于Spring框架的IOC技术. 控制反转--Spring通过一种称作控制反转(IoC)的技术促进了松耦合.当应用了IoC,一个对象依赖的其它对象会通过被动的 ...

  3. 【Java框架型项目从入门到装逼】第五节 - 在Servlet中接收和返回数据

    在上一节的程序中,我们可以看到HttpServletRequest, HttpServletResponse这两个对象.可以说,这是JavaWeb中至关重要的两个对象.接下来,我们来做一个简短的说明: ...

  4. 【Java框架型项目从入门到装逼】第二节 - Spring框架 AOP的丧心病狂解说,你喜欢露娜的月下无限连吗?

    继续上一节的内容,多几个jar包: aop技术是面向切面编程思想,作为OOP的延续思想添加到企业开发中,用于弥补OOP开发过程中的缺陷而提出的编程思想.AOP底层也是面向对象:只不过面向的不是普通的O ...

  5. 【Java框架型项目从入门到装逼】第三节 - 如何用Tomcat发布web项目?

    啥叫Tomcat?有道词典是这么说的. 这个我们姑且不管,实际上呢,Tomcat是一种Web服务器,我们自己做好了一个Web项目,就可以通过Tomcat来发布.服务器呢,又分为硬件服务器和软件服务器. ...

  6. 【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台数据

    这一节我们来说一下如何用ajax提交请求? 我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的? form表单: <!-- 采用post表单提交 --> <for ...

  7. 【Java框架型项目从入门到装逼】第四节 - 编写第一个Servlet程序

    在开始这一节之前呢,我们还需要把Tomcat配置到Eclipse中,配置的方式很简单,打开Eclipse,Window,Preferences,进入到这个页面: 将Tomcat的安装目录配置到Ecli ...

  8. 【Java框架型项目从入门到装逼】第八节 - 用EasyUI绘制主界面

    1.引入资源包 在上一节中,我们把基本的框架都搭好了,用了Spring,SPringMVC.这一节,我们先来画页面,前端框架采用EasyUI来实现. easyui是一种基于jQuery的用户界面插件集 ...

  9. 【Java框架型项目从入门到装逼】第九节 - 数据库建表和CRUD操作

    1.新建学生表 这节课我们来把和数据库以及jdbc相关的内容完成,首先,进行数据库建表.数据库呢,我们采用MySQL数据库,我们可以通过navcat之类的管理工具来轻松建表. 首先,我们得建一个数据库 ...

随机推荐

  1. java基础笔记(6)----面向对象的三大特性

    简介:面向对象的三大特性就是封装,继承,多态,是面向对象的核心. 封装 简介:封装是类的边界,可以对数据起到保护作用 特性:属性私有,提供公开的get/set方法 属性私有:private 数据类型 ...

  2. alpha-咸鱼冲刺day7

    一,合照 emmmmm.自然还是没有的. 二,项目燃尽图 三,项目进展 正在写登陆+注册ing 注册搞出来了!!!!!!!!QAQ(喜极而泣!!!!.jpg) 四,问题困难 数据流程大概是搞定了.不过 ...

  3. JDBC操作数据库的三种方式比较

    JDBC(java Database Connectivity)java数据库连接,是一种用于执行上sql语句的javaAPI,可以为多种关系型数据库提供统一访问接口.我们项目中经常用到的MySQL. ...

  4. Node入门教程(1)目录

    aicoder.com 全栈实习之简明 Node 入门文档 aicoder.com 线下实习: 不 8000 就业,不还实习费. 如果需要转载本文档,请联系老马,Q: 515154084 JS基础教程 ...

  5. 20170222==(MODBUS读取多个寄存器)

    MODBUS读取多个寄存器(功能码04) 为了简单我这里只用4个寄存器,当让你也可以用125个寄存器,但是最多也只能用125个寄存器的.每个寄存器有上面的表知道为一个字的大小即2个字节或者叫16比特位 ...

  6. C#-获取字符的GBK编码值

    public static int GetGBKValue(string key) { byte[] gbk = Encoding.GetEncoding("GBK").GetBy ...

  7. WPF 自定义ComboBox样式

    一.ComboBox基本样式 ComboBox有两种状态,可编辑和不可编辑状态.通过设置IsEditable属性可以切换控件状态. 先看基本样式效果: 基本样式代码如下: <!--ComboBo ...

  8. eclipse版本对应的jdk版本

    Installing Eclipse is relatively easy, but does involve a few steps and software from at least two d ...

  9. 访问远程的docker

        docker version vim /etc/default/docker DOCKER_OPTS="  -Label name=dockerserver2" docke ...

  10. OAuth2.0学习(1-3)OAuth2.0的参与者和流程

    OAuth(开放授权)是一个开放标准.允许第三方网站在用户授权的前提下访问在用户在服务商那里存储的各种信息.而这种授权无需将用户提供用户名和密码提供给该第三方网站. OAuth允许用户提供一个令牌给第 ...