SVG在网页中的四种使用方式
1,直接打开simple.svg
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle cx="100" cy="100" r="90" fill="#39F" />
<circle cx="70" cy="80" r="20" fill="white" />
<circle cx="130" cy="80" r="20" fill="white" />
<circle cx="65" cy="75" r="10" fill="black" />
<circle cx="125" cy="75" r="10" fill="black" />
<path d="M 50 140 A 60 60 0 0 0 150 140" stroke="white" stroke-width="3" fill="none" />
</svg>
2,在html中使用img标签引用 img.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>use img ref SVG</title>
</head>
<body>
<h1>Hello SVG with <img></h1>
<p><img src="simple.svg" alt="">原始大小</p>
<P><img src="simple.svg" alt="" width="50" height="50">50X50</P>
<p><img src="simple.svg" alt="" width="400" height="400">400X400</p>
</body>
</html>
3,在html中直接使用svg标签 nest.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nest</title>
</head>
<body>
<h1>Hello Nested SVG</h1>
<p>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle cx="100" cy="100" r="90" fill="#39F" />
<circle cx="70" cy="80" r="20" fill="white" />
<circle cx="130" cy="80" r="20" fill="white" />
<circle cx="65" cy="75" r="10" fill="black" />
<circle cx="125" cy="75" r="10" fill="black" />
<path d="M 50 140 A 60 60 0 0 0 150 140" stroke="white" stroke-width="3" fill="none" />
</svg>
</p>
</body>
</html>
4,使用css作为背景 css.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css by SVG</title>
<style>
body{
background: #EFEFEF;
}
#bg{
width: 400px;
height: 400px;
background: white url(simple.svg) repeat;
box-shadow: rgba(0,0,0,.5) 2px 3px 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>Hello SVG with CSS</h1>
<div id="bg"></div>
</body>
</html>
SVG在网页中的四种使用方式的更多相关文章
- java中的四种引用方式(强引用,软引用,弱引用,虚引用)
java内存管理主要有内存分配和内存回收,都不需要程序员负责,垃圾回收的机制主要是看对象是否有引用指向该对象. java中对象的引用主要有四种:强引用,软引用,弱引用,虚引用. Java中提供这四种引 ...
- Java中的四种引用方式
无论是通过引用计数算法判断对象的引用数量,还是通过可达性分析算法判断对象的引用链是否可达,判定对象是否存活都与"引用"有关.在Java语言中,将引用又分为强引用.软引用.弱引用 ...
- SQL中的四种连接方式
转自:http://www.cnblogs.com/afirefly/archive/2010/10/08/1845906.html 联接条件可在FROM或WHERE子句中指定,建议在FROM子句中指 ...
- vs2013在使用ef6时,创建模型向导过程中,四种模型方式缺少2种
下载eftool,并安装 https://download.microsoft.com/download/2/C/F/2CF7AFAB-4068-4DAB-88C6-CEFD770FAECD/EFTo ...
- Java中的四种引用
引用定义 实际上,Java中存在四种引用,它们由强到弱依次是:强引用.软引用.弱引用.虚引用.下面我们简单介绍下这四种引用: 强引用(Strong Reference):通常我们通过new来创建一个新 ...
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临” 在网页中弹出框输入1 网页输出“查询中……” 在 ...
- java中的四种引用类型
为什么需要引用: Java的内存回收不需要程序员负责,JVM会在必要时启动Java GC完成垃圾回收. Java以便我们控制对象的生存周期,提供给了我们四种引用方式,引用强度从强到弱分别为:强引用.软 ...
- 《网页设计基础——CSS的四种引入方式详解》
网页设计基础--CSS的四种引入方式详解 一.行内式: 规则: 1. 行内式是所有样式方法中最为直接的一种,它直接对HTML的标记使用style属性,然后将CSS代码直接写在其中. 格 ...
- lua中for循环的四种遍历方式
lua中for的四种遍历方式区别 table.maxn 取最大的整数key #table 从1开始的顺序整数最大值,如1,2,3,6 #table == 3 key,value pairs 取每一 ...
随机推荐
- Allegro PCB -如何做自定义焊盘
1.如何创建自定义焊盘,比如这种形状的焊盘. (1).打开PCB Editor –>Allegro PCB Design ->New,在类型中选择Shape symbol,并输入名字,比如 ...
- 比较好的前端方法库及一些vue如何引入静态文件
https://select2.github.io/examples.html select2 自动搜索带select选择 ## 表单提交 https://github.com/marioizqu ...
- VS找不到MFC90d.dll错误
VS 2005/VS 2008在生成可执行文件时使用了一种新的技术,该技术生成的可执行文件会伴随生成一个清单文件(manifest file)(.manifest后缀文件)(其本质上是XML文档,你可 ...
- oracle 主键自动增长
oracle 主键自动增长 2009-12-11 16:07:00| 分类: 数据库资料|字号 订阅 这几天搞Oracle,想让表的主键实现自动增长,查网络实现如下: create tabl ...
- extjs 框架模板
的 <script> Ext.onReady(function(){ Ext.create('Ext.container.Viewport', { layout: 'border', it ...
- PHP学习笔记--1,不总结,不掌握,不明白!
不总结,不掌握,不明白! 前言: 学php一开始就是语法,变量,数组,函数,OOP(面向对象[封装,继承,多态,抽象]) 这些都是最基础的东西,但你还要懂一些在实际开发中要用的东西,比如基本的HTML ...
- 必须熟悉的vim快捷键操作
转载请表明出处http://www.dabu.info/?p=801 Vim/Vi 没有菜单,只有命令 Vim/Vi 工作模式介绍:插入模式 和 命令模式 是vi的两个基本模式.——插入模式 ,是用 ...
- MySQL测试环境遇到 mmap(xxx bytes) failed; errno 12解决方法
查看Mysql日志 InnoDB: Initializing buffer pool, size = 128.0M InnoDB: mmap( bytes) failed; errno InnoDB: ...
- 【转】git命令
Git使用 1. git pull 更新服务器代码到本地a). git pull origin master是将origin这个版本库的代码更新到本地的master主分支 2. git push ...
- PHP大小写问题
PHP对于系统函数.用户自定义函数.类名称等是不区分大小写的如可以用EHCO也可以用echo调用显示函数, 但对于变量名称又是区分大小写的,如$Name和$NAME是2个不同的变量. 而对于文件名又因 ...