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 &lt;img&gt;</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>

时间： 2024-10-12 04:32:50

SVG在网页中的四种使用方式的相关文章

SQL中的四种连接方式

转自:http://www.cnblogs.com/afirefly/archive/2010/10/08/1845906.html 联接条件可在FROM或WHERE子句中指定,建议在FROM子句中指定联接条件.WHERE和HAVING子句也可以包含搜索条件,以进一步筛选联接条件所选的行. 联接可分为以下几类: 1.内联接(典型的联接运算,使用像 = 或 <> 之类的比较运算符).包括相等联接和自然联接. 内联接使用比较运算符根据每个表共有的列的值匹配两个表中的行.例如,检索

【学习笔记】——原生js中常用的四种循环方式

一.引言本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出"欢迎下次光临" 在网页中弹出框输入1 网页输出"查询中--" 在网页中弹出框输入2 网页输出"取款中--" 在网页中弹出框输入3 网页输出"转账进行中--" 在网页中弹出框输入其他字符网页输出"无效按键" 四种循环: for循环 while循环 for in

Activity中的四种启动模式

在Android中每个界面都是一个Activity,切换界面操作其实是多个不同Activity之间的实例化操作.在Android中Activity的启动模式决定了Activity的启动运行方式. Android总Activity的启动模式分为四种: [html] view plaincopy Activity启动模式设置: <activity android:name=".MainActivity" android:launchMode="standard"

C++中的四种转型操作符

在详细介绍C++中的四种转型操作符之前,我们先来说说旧式转型的缺点: ①它几乎允许将任何类型转换为任何其他类型,这是十分拙劣的.如果每次转型都能够更精确地指明意图,则更好. ②旧式转型难以辨识.旧式转型的语法结构是由一对小括号加上一个对象名称组成,而小括号和对象名称在C++的任何地方都有可能被使用. 为解决C旧式转型的缺点,C++导入了4个新的转型操作符:static_cast.const_cast.dynamic_cast.reinterpret_cast.下面我来一一分析这四种转型操作符.

JAVA中的四种引用以及ReferenceQueue和WeakHashMap的使用示例

简介: 本文主要介绍JAVA中的四种引用: StrongReference(强引用).SoftReferenc(软引用).WeakReferenc(弱引用).PhantomReference(虚引用)的作用.同时我们还将介绍ReferenceQueue和WeakHashMap的功能和使用示例. 欢迎探讨,如有错误敬请指正如需转载,请注明出处 http://www.cnblogs.com/nullzx/ 1. JAVA中的四种引用四种引用中,软引用.若引用.虚引用都需要相关类来创建.创建的时候

对比iOS中的四种数据存储

你是用什么方法来持久保存数据的?这是在几乎每一次关于iOS技术的交流或讨论都会被提到的问题,而且大家对这个问题的热情持续高涨.本文主要从概念上把“数据存储”这个问题进行剖析,并且结合各自特点和适用场景给大家提供一个选择的思路,并不详细介绍某一种方式的技术细节. 谈到数据储存,首先要明确区分两个概念,数据结构和储存方式.所谓数据结构就是数据存在的形式.除了基本的NSDictionary.NSArray和NSSet这些对象,还有更复杂的如:关系模型.对象图和属性列表多种结构.而存储方式则简单的分为两

java中的四种单例实现方式

在java中,单例设计模式是非常常见的设计模式,对单例设计模式的概念,不做过多的介绍,下面将逐一介绍四种单例设计模式: 1.第一种单例设计模式 1.1 代码实现 package com.singleton.one; /** * 第一种单例设计模式 * @author Administrator * */ public class SingleTonOne { // 实例化 private static SingleTonOne instance = new SingleTonOne();

lua中for循环的四种遍历方式

lua中for的四种遍历方式区别 table.maxn 取最大的整数key #table 从1开始的顺序整数最大值,如1,2,3,6 #table == 3 key,value pairs 取每一个键值对 ipairs 取从key==1开始的顺序整数最大值,每个键值对参考http://rangercyh.blog.51cto.com/1444712/1032925 不过有一个问题, tbtest = { [1] = 1, [2] = 2, [4] = 4, } print(#(tbtest))

对称加密和分组加密中的四种模式(ECB、CBC、CFB、OFB)

对称加密和分组加密中的四种模式(ECB.CBC.CFB.OFB) 一. AES对称加密: AES加密分组二. 分组密码的填充分组密码的填充 e.g.: PKCS#5填充方式三. 流密码: 四. 分组密码加密中的四种模式: 3.1 ECB模式优点: 1.简单: 2.有利于并行计算: 3.误差不会被传送: 缺点: 1.不能隐藏明文的模式: 2.可能对明文进行主动攻击: 3.2 CBC模式: 优点: 1.不容易主动攻击,安全性好于ECB,适合传输长度长的报文,是SSL.IPSec的标准.