svg从入门到装逼(一)
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从入门到装逼(一)的更多相关文章
- 【Java框架型项目从入门到装逼】第七节 - 学生管理系统项目搭建
本次的教程是打算用Spring,SpringMVC以及传统的jdbc技术来制作一个简单的增删改查项目,对用户信息进行增删改查,就这么简单. 1.新建项目 首先,打开eclipse,新建一个web项目. ...
- 【Java框架型项目从入门到装逼】第一节 - Spring框架 IOC的丧心病狂解说
大家好,好久不见,今天我们来一起学习一下关于Spring框架的IOC技术. 控制反转--Spring通过一种称作控制反转(IoC)的技术促进了松耦合.当应用了IoC,一个对象依赖的其它对象会通过被动的 ...
- 【Java框架型项目从入门到装逼】第五节 - 在Servlet中接收和返回数据
在上一节的程序中,我们可以看到HttpServletRequest, HttpServletResponse这两个对象.可以说,这是JavaWeb中至关重要的两个对象.接下来,我们来做一个简短的说明: ...
- 【Java框架型项目从入门到装逼】第二节 - Spring框架 AOP的丧心病狂解说,你喜欢露娜的月下无限连吗?
继续上一节的内容,多几个jar包: aop技术是面向切面编程思想,作为OOP的延续思想添加到企业开发中,用于弥补OOP开发过程中的缺陷而提出的编程思想.AOP底层也是面向对象:只不过面向的不是普通的O ...
- 【Java框架型项目从入门到装逼】第三节 - 如何用Tomcat发布web项目?
啥叫Tomcat?有道词典是这么说的. 这个我们姑且不管,实际上呢,Tomcat是一种Web服务器,我们自己做好了一个Web项目,就可以通过Tomcat来发布.服务器呢,又分为硬件服务器和软件服务器. ...
- 【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台数据
这一节我们来说一下如何用ajax提交请求? 我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的? form表单: <!-- 采用post表单提交 --> <for ...
- 【Java框架型项目从入门到装逼】第四节 - 编写第一个Servlet程序
在开始这一节之前呢,我们还需要把Tomcat配置到Eclipse中,配置的方式很简单,打开Eclipse,Window,Preferences,进入到这个页面: 将Tomcat的安装目录配置到Ecli ...
- 【Java框架型项目从入门到装逼】第八节 - 用EasyUI绘制主界面
1.引入资源包 在上一节中,我们把基本的框架都搭好了,用了Spring,SPringMVC.这一节,我们先来画页面,前端框架采用EasyUI来实现. easyui是一种基于jQuery的用户界面插件集 ...
- 【Java框架型项目从入门到装逼】第九节 - 数据库建表和CRUD操作
1.新建学生表 这节课我们来把和数据库以及jdbc相关的内容完成,首先,进行数据库建表.数据库呢,我们采用MySQL数据库,我们可以通过navcat之类的管理工具来轻松建表. 首先,我们得建一个数据库 ...
随机推荐
- New UWP Community Toolkit - Markdown
概述 前面 New UWP Community Toolkit 文章中,我们对 V2.2.0 版本的重要更新做了简单回顾,其中简单介绍了 MarkdownTextBlock 和 MarkdownDoc ...
- [BZOJ 1297][SCOI2009]迷路
1297: [SCOI2009]迷路 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 1418 Solved: 1017[Submit][Status ...
- Android中Activity和Service的数据通讯
在Android中,我们通常需要Activity跟Service进行通讯,很多人只知道Activity掉用Service,却不知道Service如何将数据返回给Activity.其实Service返回 ...
- 【RabbitMQ系列】队列、绑定、交换器
队列: 从概念上来讲,AMQP消息路由必须有三部分:交换器.队列和绑定.生产者把消息发布到交换器上:消息最终到达队列,并被消费者接收:绑定决定了消息如何从路由器路由到特定的队列. 消费者通过以下两种方 ...
- maven添加oracle驱动
由于oracle商业版权问题,maven是不可以直接下载jar包的,所以.. 先将ojdbc14.jar放到用户目录,win7放到C:\Users\Administrator然后在cmd执行 ...
- tomcat下的web.xml和项目中的web.xml
Tomcat 服务器中存在一个web.xml文件 在项目文件夹中同样存在一个web.xml文件 那这两个文件有什么区别呢? tomcat中的web.xml是通用的,如果不设置,那么就会默认是同tomc ...
- margin-top导致父标签偏移问题
从一个大神博客中看到这句话: 这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边 ...
- 关于读取Sql Server数据库时间前端处理问题
var time = this.CreateTime; this.CreateTime = new Date(time.replace("T", " ")).F ...
- thinkphp中的常见静态常亮
thinkphp __PUBLIC__的定义 __ROOT__等常量的定义 1 2 3 4 5 6 7 8 9 '__TMPL__' => APP_TMPL_PATH, // 项目 ...
- angular4学习笔记整理(二)angular4的路由使用
这章说一下angular的路由 先说angular路由怎么引入,一开始new出来的angular项目它路由帮你配好了,但看要看app.module.ts里面 1.首先最上面要引入路由模块 import ...