Notes:SVG(1)
SVG，"Scalable Vector Graphics"可伸缩矢量图形，基于可扩展标记语言，用于描述二维矢量图形的一种图形格式。
SVG是纯粹的XML，可以使用以下方法插入到HTML中：
- 使用
<iframe>元素来嵌入SVG图像 - 使用
<img>元素来嵌入SVG图像 - 将SVG图像作为背景图像嵌入
- 直接使用
<svg>元素 - 使用
<embed>元素来嵌入SVG图像 - 使用
<object>元素来嵌入SVG图像
假设有一个如下所示的SVG文件，名为test.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 width="200" height="200" xmlns="http://www.w3.org/2000/svg">//这里xmlns是必须的
<rect width="100%" height="100%" style="fill:cornflowerblue" />
</svg>
SVG的xmlns声明空间必须指定，否则将不会解析成svg标签。
编写一个html文件，内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="test.svg">
</body>
</html>
结果如下
也可以直接在html5文档中使用svg标签，如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" style="fill:url(#orange_red)" />
<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="20%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="80%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
</svg>
</body>
</html>
表现如下所示
Notes:SVG(1)的更多相关文章
- Notes:SVG(4)基于stroke-dasharray和stroke-dashoffset圆形进度条
stroke-dasharray:定义描边的虚线长度,如果提供奇数个,则会自动复制该值成偶数 stroke-dashoffset:定义虚线描边的偏移量(在路径开始的前面,看不到) 实现如下所示 svg ...
- Notes:SVG(3)---滤镜和渐变
SVG滤镜使用filter标签来定义,该标签必须嵌套在defs元素里面,并且必须指定一个ID,以供引用. 在 SVG 中,可用的滤镜有: feBlend feColorMatrix feCompone ...
- Notes:SVG(2)---各种常见图形
1.矩形rect,指定rx,ry可以得到圆角矩形 <rect x="10" y="10" rx="10" ry="10&qu ...
- 【Openxml】将Openxml的椭圆弧线arcTo转为Svg的椭圆弧线
本文将介绍如何将OpenXml的actTo转为Svg的弧线(a) OpenXml的artTo 首先下面是一段OpenXml的arcTo弧线 <arcTo wR="152403" ...
- 根据SVG Arc求出其开始角、摆动角和椭圆圆心
SVG Arc 目前Svg的Arc的参数字符串如下: a rx ry x-axis-rotation large-arc-flag sweep-flag x y 除了a表示标识为Arc之外,其余参数说 ...
- HTML5的 2D SVG和SVG DOM的学习笔记（2）---SVG动画
SVG支持动画.可以通过以下几种方法获得动画效果: 使用SVG动画元素.SVG可以描述随时间变化的图形对象,使用不同的动画元素可以定义运动路径,淡入淡出效果和对象的膨胀.收缩.旋转和变换颜色. 使用S ...
- HTML5的 2D SVG和SVG DOM的学习笔记（1）
(项目中要使用SVG,只好补充知识了) HTML体系中,最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素.这两种技术都支持绘制矢量图和光栅图. 一.SVG概述 可缩放矢量图形(Sc ...
- SVG 2D入门8 - 文档结构
前面介绍了很多的基本元素,包括结构相关的组合和重用元素,这里先对SVG的文档结构中剩下的相关元素简单总结一下,然后继续向前领略SVG的其他特性. SVG文档的元素基本可以分为以下几类: 动画元素:an ...
- 使用SVG Path绘图
最近一个项目,需要做个Web版本的设计器,用来进行工厂流水线布局的设计. 项目中采用了SVG.JS来做,但是以前流水线是采用单纯的画线的方式实现.客户提出希望用不同的底纹表示不同的流水线,经过一番调查 ...
随机推荐
- CF-补题1
CF-补题1 1.CodeForces 735C 题意:n个人淘汰赛,两个人可以比赛的条件是:两人打过的场数之差绝对值<2.求冠军最多可以打多少场. 总结:看了题解,转换一下思路.求n个 ...
- asp.net 项目Net4.0 在IE10、 IE 11 下出现 “__doPostBack”未定义 的解决办法
我的项目中,服务器端是Windows Server2008 64位,.net版本是4.0,也遇到了树形结构控件.DropDownList控件等不能调用服务器端代码.最后发现js报错. 错误信息:“__ ...
- block 从B界面向A界面传值
最近在改公司外包项目的代码,发现了一种block传值的用法很有意思,记录一下 A.B两个页面 在B界面.h中定义 @property (nonatomic,strong) void(^block)(N ...
- IDEA+Tomcat+JRebel热部署1
所需资源下载: jrebel_6.4.2a 概述 JRebel是一个J2EE热部署的工具.使用它可以减少浪费8-18%的开发时间在项目的构建和部署上.之前只是听说过,一直没有实践,今天实际使用了一把 ...
- java 过滤表情符号
/** * 过滤表情符号 * @create by ldw on 2016-10-25 * @param str * @return str(去掉表情符号的字符串) * @version 1.0 * ...
- 使div下的图片自适应div的大小
div img{ max-width:100%; height:auto; } 这里div 要给固定的宽度 开始这里还想了半天 用网上的方法也不行 问老大 又一句话就给我解决了...老大真男神啊!!! ...
- PHP基础知识之foreach
定义: foreach (array_expression as $value)------------循环时传递key foreach (array_expression as $key => ...
- 《Linux内核设计与实现》读书笔记 第四章 进程调度
第四章进程调度 进程调度程序可看做在可运行太进程之间分配有限的处理器时间资源的内核子系统.调度程序是多任务操作系统的基础.通过调度程序的合理调度,系统资源才能最大限度地发挥作用,多进程才会有并发执行的 ...
- 通过一组RESTful API暴露CQRS系统功能
命令和查询责任分离(CQRS)是由Greg Young提出的一种将系统的读(查询).写(命令)操作分离为两种独立子系统的架构模式.命令通常是异步执行的,并存储在一个事务型数据库中,而读操作则通常是最终 ...
- ASP.Net请求处理机制初步探索之旅 - Part 3 管道
开篇:上一篇我们了解了一个ASP.Net页面请求的核心处理入口,它经历了三个重要的入口,分别是:ISAPIRuntime.ProcessRequest().HttpRuntime.ProcessReq ...