o'Reill的SVG精髓（第二版）学习笔记—

在网页中使用SVG

将SVG作为图像：

SVG是一种图像格式，因此可以使用与其他图像类型相同的方式包含在HTML页面中，具体可以采用两种方法：将图像包含在HTML标记的<img>元素内（当图像是页面的基本组成部分时，推荐这种方式）；或者将图像作为另一个元素的CSS样式属性插入（放图像主要用来装饰时推荐这种方式）。

四种方式在web页面中插入SVG：①将SVG作为图像②将SVG作为CSS背景③将SVG作为对象④内联SVG

2.1.1在<img>元素内包含SVG

<img src="cat.svg" title="cat image" alt="Stick Figure of a cat"/>

注：会有一些老式的浏览器不知道如何渲染svg文件，会显示一个破碎的文件图标（或者什么都不显示）。还有一些浏览器可能需要你确认你的web服务器以.svg结尾的文件声明了正确的媒体类型头（image/svg+xml）。

图像的高度和宽度可以使用属性或者CSS属性（优先考虑）设置。其他CSS属性控制web页面内图像的位置。如果不指定<img>元素的尺寸，就会使用图像文件固有的尺寸。如果只指定高度（宽度），宽度（高度）就会按比例缩放，以使高宽比（宽高比）与图像文件固有的尺寸匹配。

对于SVG来说，如果文件中的根元素<svg>带有明确的height和width属性，则它们会被用作文件的固有尺寸。如果只指定heifht或者width而不是两个都指定，并且<svg>带有viewBox属性，那么将用viewBox计算宽高比，图像也会被缩放以匹配指定的尺寸。如果<svg>带有viewBox属性而没有尺寸，则viewBox的height和width将被视为像素长度。

如果<img>元素和svg根元素都没有任何有关图像尺寸的信息，浏览器应该为嵌入内容应用默认HTML尺寸，通常是150像素高、300像素宽，但是最好不要依赖默认尺寸。

2.2在CSS中包含SVG

默认情况下，背景图像会按照固有尺寸进行绘制，并且会在垂直和水平方向上重复，以填满该元素。如果没有固定尺寸，SVG会被缩放为元素高度和宽度的100%。

div.background-cat {

  background-image:url("cat.svg");

  background-size:100% 100%;

}

除了用作背景图像，在CSS中SVG文件还能用作list-image（用于创建装饰性项目列表）或者border-image（用于创建花哨的边框）

注：当多个小图标和标识使用栅格图像的时候，通常会将所有图像放在一个图像文件的网格内，然后使用background-size和background-position为每个元素设置对应的图像。这样浏览器只需要下载一个图像文件，从而可使网页显示的更快。这种组合图像文件被称为CSS精灵。

2.1.3将SVG作为应用程序。

要将外部SVG文件整合到HTML页面中，而又不想受到作为图像嵌入时的种种限制的话，可以使用嵌入图像。

浏览器使用文件类型确定如何（或者是否可以）显示该文件，而不需要首先下载文件。文件的位置通过data属性指定。alt和title属性的用法和图像一样。

下面的代码会在浏览器不支持SVG时显示一个说明文本和一个栅格图像：

<object data="cat.svg" type="iamge/svg+xml" title="Cat Object" alt="Stick Figure of a cat">

        <!-- 文本或者栅格图像用作备选项 -->

        <p>No SVG support!Here's a substitute:</p>

        <img src="cat.png" alt="A raster rendering of a Stick Figure of a Cat" title="Cat Fallback"/>

    </object>

在引入<object>之前，有些浏览器使用的是<embed>元素来达到相同的目的。如需支持老版本浏览器，可以使用<embed>元素替换<object>元素。为了得到更广泛的支持，可以将<embed>作为<object>标签内部的备用内容。

当SVG文件作为嵌入对象引用时，SVG文件的渲染方式与它被包含在<img>元素中时大致相同：它会被缩放以适配嵌入元素的宽高，并且不会继承定义在父文档中的任何样式。

然而与图像不同，嵌入的SVG可以包含外部文件，同时脚本可以在该对象和父页面之间进行通信。

2.3混合文档中的SVG标记

2.3.1 SVG中的foreign object

混合内容的一种方式是在SVG内插入部分HTML(或其他)内容，SVG规范定义了一种在图像指定区域嵌入这种“foreign”内容的方式

<foreignObject>元素定义了一个矩形区域，Web浏览器（或者其他SVG阅读器）应该在其中绘制子XML内容。浏览器负责确定如何绘制内容。子内容通常是XHTML（XML兼容的HTML）代码，但它也可能是SVG阅读器能显示的任意形式的XML。内容类型通过子内容上的xmlns属性声明的XML命名空间来定义。

矩形绘制区域通过<foreignObject>元素的x、y、width和height属性定义，方式类似于<use>或者<image>元素。

对于创建混合SVG/XHTML文档，<foreignObject>元素极具潜力，但是目前未得到很好的支持，IE(到版本11为止)根本不支持它，在其他浏览器实现中也还存在错误和不一致性。

<g transform="skewX(20)">

    <switch>

        <!-- 选择一个子元素 -->

        <foreignObject x="1em" y="25%" width="10em" height="50%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">

            <body xmlns="http://www.w3.org/1999/xhtml">

                <p>

                    this is an XHTML pragraph embedded within a SVG!

                    So this text will wrap nicely around multiple lines,

                    but it will still be skewed from the SVG tranform.

                </p>

            </body>

        </foreignObject>

        <text x="1em" y="25%" dy="1em">

            This SVG text won't wrap,so it will get cut off...

        </text>

    </switch>

</g>

如果想定义备用内容，以防SVG阅读器不能显示foreign object内容，可以结合使用requiredFeatures属性和<switch>。在支持XHTML和foreign object的浏览器中。在其他浏览器中，只显示SVG文本。

<switch>元素会告诉SVG阅读器只有在元素的requiredFeatures、requiredExtensions一级systemLanguage属性求值为true或者缺失的时候，才绘制第一个直接子元素（以及所有子节点）。

2.3.2在XHTML或者HTML5中内联SVG

另一种混合SVG和XHTML的方式是在XHTML文档中包含SVG标记，它还可以在使用HTML5语法的非XML兼容的HTML文档中使用。称为内联SVG。

对于XHTML，可以通过在SVG命名空间内定义SVG元素来表明正在切换到SVG。最简单的方式就是在顶级<svg>元素上设置xmlns="http://www.w3.org/2000/svg"，它会改变改元素以及其所有子节点的默认命名空间。

对于HTML5，<svg>元素上的xmlns属性是可选的。对于XHTML文档，需要干煸文件顶部的DOCTYPE声明，以及使用<![CDATA[...]]>块包裹<style>元素的CSS代码。

<!DOCTYPE html>

<html>

<head>

    <title>SVG in html</title>

    <style>

        svg {

            display: block;

            width: 500px;

            height: 500px;

            margin:auto;

            border:thick double navy;

            background-color: lightblue;

        }/* SVG应该如何放置以及在HTML文档内的尺寸 */

        body{

            font-family: cursive;

        }

        circle{

            fill:lavender;

            stroke:navy;

            strike-width:5;

        }

    </style>

</head>

<body>

    <h1>Inline SVG in HTML Demo Page</h1>

    <svg viewBox="0 0 250 250"

        xmlns="http://www.w3.org/2000/svg">

    <title>An SVG circle</title>

    <circle cx = "125" cy = "125" r="100" />

    <text x = "125" y = "125" dy = "0.5em" text-anchor="middle">

        Look Ma,Same Font!

    </text>

    <p>And here is regular HTML again...</p>

    </svg>

</body>

</html>

2.3.3其他XML应用程序中的SVG

XML命名空间除了可以用于XHTML以外，也可以用于在其他XML文档中标识SVG，具体的细节依赖于主XML文档的语法，但是又两个基本要求：XML文档必须为SVG元素明确定义一个布局盒子，并且用于显示这个文档的程序必须知道如何绘制SVG。

一种经常内联SVG的XML文档类型是可扩展样式语言格式化对象文件（XSL-FO）。一个XSL-FO文件顶一个一个多页文档的内容和布局，可以用于发布或者创建一个PDF文件。XSL-FO数据类型定义包含一个<instream-foreign-object>元素，它类似于SVG的<foreignObject>元素，定义一个矩形区域来容纳来自不同命名空间的内容。

o'Reill的SVG精髓（第二版）学习笔记——第二章的更多相关文章

Docker技术入门与实战第二版-学习笔记-10-Docker Machine 项目-2-driver
1>使用的driver 1〉generic 使用带有SSH的现有VM/主机创建机器. 如果你使用的是机器不直接支持的provider,或者希望导入现有主机以允许Docker Machine进行管 ...
Docker技术入门与实战第二版-学习笔记-8-网络功能network-3-容器访问控制和自定义网桥
1)容器访问控制容器的访问控制,主要通过 Linux 上的 iptables防火墙来进行管理和实现. iptables是 Linux 上默认的防火墙软件,在大部分发行版中都自带. 容器访问外部网络 ...
锋利的jquery第二版学习笔记
jquery系统学习笔记一.初识:jquery的优势:1.轻量级(压缩后不到30KB)2.强大的选择器(支持css1.css2选择器的全部 css3的大部分以及一些独创的加入插件的话还可支持XP ...
Docker技术入门与实战第二版-学习笔记-10-Docker Machine 项目-1-cli
Docker Machine 是 Docker 官方编排(Orchestration)项目之一,负责在多种平台上快速安装 Docker 环境 Docker Machine是一种工具,它允许你在虚拟主机 ...
Docker技术入门与实战第二版-学习笔记-7-数据管理(volume)
Docker 数据管理为什么要进行数据管理呢?因为当我们在使用container时,可能会在里面创建一些数据或文件,但是当我们停掉或删除这个容器时,这些数据或文件也会同样被删除,这是我们并不想看见的 ...
Docker技术入门与实战第二版-学习笔记-5-容器-命令及限制内存与cpu资源
1.启动容器启动容器有两种方式: 基于镜像新建一个容器并启动将在终止状态(stopped)的容器重新启动 1)新建并启动——docker run 比如在启动ubuntu:14.04容器,并输出“H ...
Docker技术入门与实战第二版-学习笔记-3-Dockerfile 指令详解
前面已经讲解了FROM.RUN指令,还提及了COPY.ADD,接下来学习其他的指令 5.Dockerfile 指令详解 1> COPY 复制文件格式: COPY <源路径> .. ...
c#高级编程第七版学习笔记第二章核心c#
第二章核心C# 本章内容: 声明变量变量的初始化和作用域 C#的预定义数据类型在c#程序中使用条件语句.循环和跳转语句执行流枚举名称空间 Main()方法基本的命令行c#编译器选项使用S ...
Docker技术入门与实战第二版-学习笔记-6-仓库
仓库(Repository)是集中存放镜像的地方一个容易混淆的概念是注册服务器(Registry). 实际上注册服务器是管理仓库的具体服务器,每个服务器上可以有多个仓库,而每个仓库下面有多个镜像. ...
Docker技术入门与实战第二版-学习笔记-2-镜像构建
3.利用 commit 理解镜像构成在之前的例子中,我们所使用的都是来自于 Docker Hub 的镜像. 直接使用这些镜像是可以满足一定的需求,而当这些镜像无法直接满足需求时,我们就需要定制这些镜 ...

随机推荐

微信token验证源码分享(c#版)
在开发时遇到一个问题: 上线后提交申请微信提示"您的服务器没有正确响应token验证...",我查看日志发现根本就没有接收到来自微信的参数. 后来我又记录了微信请求方式和请求的字符 ...
01.c#中的访问修饰符
public 公开的 private 私有的,只能在当前类的内部访问 protected 受保护的,只能在当前内的内部以及该类的子类可以访问. internal 可以在同一个程序(项目)集中 ...
Thrift笔记(一)--Hello Demo
Thrift是一个RPC框架 1. 用IDL定义好实体和服务框架,如实体字段名,类型等.服务名,服务参数,返回值等 2. 通过编译器或者说代码生成器生成RPC框架代码 IDL语法,代码生成器的安装使用 ...
linkedHashMap源码解析（JDK1.8）
引言关于java中的不常见模块,让我一下子想我也想不出来,所以我希望以后每次遇到的时候我就加一篇.上次有人建议我写全所有常用的Map,所以我研究了一晚上LinkedHashMap,把自己感悟到的解释 ...
对HTML的大致了解
HTML的全称是Hyper Text Markup Language(超文本标记语言),是一种标记语言.其中,HTML文档一个重要的.广泛使用的标准HTML4.01是在1999年12月24日由W3C组 ...
linux里终端安转视频播放器的操作及显示
[enilu@enilu ~]$ mplayerbash: mplayer: command not found[enilu@enilu ~]$ yum list | grep mplayer^C^C ...
attention
attention: 时序的刻画 attention 在recommendation 中的应用: 年龄的增长, 对于商品的喜好 Dynamic attention deeo model:
java面试题之----数据库事务的四大特性及隔离级别
本篇讲诉数据库中事务的四大特性(ACID),并且将会详细地说明事务的隔离级别. 如果一个数据库声称支持事务的操作,那么该数据库必须要具备以下四个特性: ⑴ 原子性(Atomicity) 原子性是指事务 ...
基于VB语言对SolidWorks参数化设计的二次开发
0 引言随着数字信息化进程的快速推进,如今三维CAD技术在越来越多的企业当中得到运用.为了降低在设计生产中的成本,缩短设计周期,增强企业竞争力,三维参数化技术随之应声,它凭借更贴近现代概念的设计以及 ...
JS实现“双色球”
需求: 双色球玩法简单介绍: “双色球”彩票投注区分为红色球号码区和蓝色球号码区.每注投注号码由6个红色球号码和1个蓝色球号码组成.红色球号码从1--33中选择:蓝色球号码从1--16中选择.程序要求 ...

o'Reill的SVG精髓（第二版）学习笔记——第二章

o'Reill的SVG精髓（第二版）学习笔记——第二章的更多相关文章

随机推荐

热门专题