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 取每一 ...
随机推荐
- paramiko 模块安装
windows版本: 所需软件有:PyCrypto.ecdsa.paramiko. 一.软件下载地址 1.PyCrypto下载地址: http://www.voidspace.org.uk/pyth ...
- php 命名空间的目的
php引入命名空间的目的,就是为了防止不同的文件 标识符同名的问题,比如类.函数.变量同名导致冲突的问题.这才是根本的根本,了解指点,带着这个观念去学习php命名空间的相关知识,就不会云里雾里了,会比 ...
- 计算机学院大学生程序设计竞赛（2015’12） 1003 The collector’s puzzle
#include<cstdio> #include<algorithm> using namespace std; using namespace std; +; int a[ ...
- PHP 领域模型与数据库映射文章
1. http://blog.csdn.net/happen_zhang/article/details/12761747 2. http://blog.csdn.net/hguisu/article ...
- WAV音频格式分析
wav是windows下无损的声音文件,该文件保存了音频的PCM信息和播放器播放该音乐的时候的大多数信息,他有两个块组成,第一个块是格式块,第二个块是数据块 先说格式块,格式块用一张图可以解释,如下 ...
- mysql----ERROR 1040 (HY000): Too many connections
http://gwokae.mewggle.com/wordpress/index.php/archives/683 查看最大链接 mysql -h alg-db14 -u bfdroot -pqia ...
- iOS开发——缩放图片
捏合图片,在原imageView中放大缩小图片. 懒得多说,直接上代码: // // ViewController.m // Demo-hehehe // // Created by yyt o ...
- 机器学习算法与实现 之 Logistic Regression---java实现
Logistic Regression和Linear Regression实现起来几乎是一样的,有疑问的同学可以看一看Andrew N.g在coursera上的machine learning课程. ...
- Mysql mysql lost connection to server during query 问题解决方法
在linux上新安装的mysql数据库远程连接速度很慢,用Navicate可以正常连接但是时间很长:使用toad连接提示Mysql mysql lost connection to server du ...
- 蓝牙协议 基于TI cc2540 模块的理解（转）
源:蓝牙协议 基于TI cc2540 模块的理解 Bluetooth 4.0开发 Platform:TI IC:cc2540 Environment:windows 7 tools:IAR 8.20. ...