正文

o'reill的svg精髓（第二版）学习笔记——第五章

风雨飘飘飘啊飘  风雨飘飘飘啊飘  2022-10-02  204

关键词：

第五章文档结构

5.1 结构与表现

XML的目标之一便是提供一种能将结构从视觉表示中独立出来的方法。

但是不幸的是，关于XML的很多讨论都强调结构而非表现。

我们将通过详细讨论如何在SVG中指定表现来纠正这一错误。

5.2在SVG中使用样式

SVG允许我们使用四种方式指定图形表现方面的信息：内联样式、内部样式表、外部样式表以及表现属性。

5.2.1 内联样式

我们设置style属性的值为一系列视觉属性。

<circle cx="20" cy="20" r="10" style="stroke:black;stroke-width:1.5;fill:blue;fill-opacity:0.6;" />

5.2.2 内部样式表

可以通过一个内部样式表来罗列常用的样式，而无需在每个SVG元素内植入样式。这样可以为所有某一类元素应用样式，也可以使用命名类为特定元素应用样式。

　　<svg width = "200px" height = "200px" viewBox = "0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <style type="text/css"><![CDATA[
                circle{
                    fill:#ffc;
                    stroke: blue;
                    stroke-width:2;
                    stroke-dasharray: 5 3;
                }
            ]]></style>
        </defs>
        <circle cx="20" cy="20" r="10" />
        <circle cx="60" cy="20" r="15" />
        <circle cx="20" cy="60" r="10" style="fill:#cfc" />
        <circle cx="60" cy="60" r="15" style="stroke-width:1;stroke-dasharray: none;" />
    </svg>

效果图：

5.2.3外部样式表

如果想要为多个SVG文档应用一组样式，可以通过为每个SVG元素复制和粘贴内部样式表的方式俩实现。但是如果你希望能统一修改这些文档的样式，则发现这种方式是不切实际的。我们应该吧开始和结束<style>标签（不包括<![CDATA[ ]]> ）之间的所有样式信息保存在一个外部文件，然后把其变成一个外部样式表。

XML：

<?xml version="1.0"?>
<?xml-stylesheet href="ext_style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="0 0 200 200">
    <line x1="10" y1="10" x2="40" y2="10" />
    <rect x="10" y="20" width="40" height="30" />
    <circle class="yellow" cx="70" cy="20" r="10" />
    <polygon class="thick" points="60 50,60 80,90 80" />
    <polygon class="thick semiblue" points="100 30,150 30,150 50,130 50" />
</svg>

外部样式表CSS：

*{fill:none;stroke:black;}/* 所有元素默认样式 */
rect{
    stroke-dasharray:7 3;
}
circle.yellow{
    fill:yellow;
}
.thick{
    stroke-width:5;
}
.semiblue{
    fill:blue;
    fill-opacity:0.5;
}

效果图：

内联样式几乎总是比内部或者外部样式表渲染得更快，这是因为样式表和类增加了渲染时的查询和解析时间，然而样式表更容易管理，更小的文件体积和可缓存的特性可以加快文档加载速度。

5.2.4 表现属性

虽然大多数SVG文档都使用样式来表达表现信息，但是SVG的确允许我们使用表现属性指定这些信息：

<circle cx="10" cy="10" r="5" fill="red" stroke="black" stroke-width="2" />

这样做混合了结构与表现。当我们通过将XML数据源转换为SVG的方式来创建SVG文档时，表现属性会派上用场。在这些情况下，为每个表现属性创建独立的属性，要比为一个style属性创建内容更容易。如果使用SVG的环境下不支持样式表，可能需要使用表现属性。

表现属性位于优先级别列表的最底部。任何来自内联样式、内部样式或者外部样式表的样式声明都会覆盖表现属性，但表现属性会覆盖继承的样式。

强调：指定表现信息的首选应该是使用style属性或者样式表。样式表允许我们为文档中的某些元素应用一系列复杂的填充和笔画特性，而不必为每个元素复制一遍表现信息，这正是表现属性所应该有的效果。样式表的能力和灵活性允许我们花最少的经理就能改变对多个文档的外观。

5.3 分组和引用对象

我们通常认为大多数非抽象的艺术作品都是由一系列命名对象组成的，而这些对象由形状和线条组合而成。SVG提供一些元素，允许我们对元素进行这样的分组，从而使文档更加架构化、更易理解。

5.3.1<g>元素

<g>圆度会将其所有子元素作为一个组合，通常组合还会有一个唯一的id作为名称。每个组合还可以拥有自己的<title>和<desc>来供基于文本的XML应用程序识别。需索SVG渲染代理都会在鼠标悬停或者轻触组合内的图形时显示一个提示框，显示<title>元素的内容。屏幕阅读器也会读取<title>和<desc>元素的内容。

<g>元素可以组合元素，并为他们提供一些注解，这使得我们的文档结构更为清晰。<g>元素还提供了一些书写上的便利。在其实<g>标签中指定的所有样式会应用于组合内的所有子元素。而且组合还可以彼此嵌套。

　　<svg width = "240px" height = "240px" viewBox = "0 0 240 240" xmlns="http://www.w3.org/2000/svg">
        <title>Grouped Drawing</title>
        <desc>Stick-figure drawings of a house and people</desc>
        <g id="house" style="fill:none;stroke:black;">
            <desc>House with door</desc>
            <rect x="6" y="50" width="60" height="60" />
            <polyline points="6 50,36 9,66 50" />
            <polyline points="36 110,36 80,50 80,50 110" />
        </g>

        <g id="man" style="fill:none;stroke: black;">
            <desc>Male human</desc>
            <circle cx="85" cy="56" r="10" />
            <line x1="85" y1="66" x2="85" y2="80" />
            <polyline points="76 104,85 80,94 104" />
            <polyline points="76 70,85 76,94 70" />
        </g>

        <g id="woman" style="fill:none;stroke: black;">
            <desc>Female human</desc>
            <circle cx="110" cy="56" r="10" />
            <polyline points="110 66,110 80,100 90,120 90,110 80" />
            <line x1="104" y1="104" x2="108" y2="90" />
            <line x1="112" y1="90" x2="116" y2="104" />
            <polyline points="101 70,110 76,119 70"/>
        </g>
    </svg>

效果图：

5.3.2 <use>元素

SVG使用<ues>元素，为定义在<g>元素内的组合或者任意独立图形元素提供了类似于复制粘贴的能力。

定义了一组图形对象以后，可以使用<use>标签再次显示它们。要指定想要重用的组合，给xlink:href属性指定URI即可。同时还要指定x和y的位置以表示组合的(0,0)应该移动到的位置。因此为了创建另一个和上一个一样的房子和一组小人，只要把这些线条放到闭合的</svg>标签之前即可。

　　　　 <use xlink:href="#house" x="70" y="100" />
        <use xlink:href="#woman" x="-80" y="100" />
        <use xlink:href="#man" x="-30" y="100" />

效果图：

5.3.3<defs>元素

<defs>(定义)元素可以通过在起始和结束<defs>标记之间放置这些组合对象，我们可以告诉SVG只定义但不现实它们。

http://oreillymedia.github.io/svg-essentials-examples/ch05/defs-example.html

　　<svg width = "480px" height = "240px" viewBox = "0 0 480 240" xmlns="http://www.w3.org/2000/svg">
        <title>Grouped Drawing</title>
        <desc>Stick-figure drawings of a house and people</desc>
        <defs>
            <g id="house" style="stroke:black;">
                <desc>House with door</desc>
                <rect x="0" y="41" width="60" height="60" />
                <polyline points="0 41,30 0,60 41" />
                <polyline points="30 101,30 71,44 71,44 101" />
            </g>

            <g id="man" style="fill:none;stroke: black;">
                <desc>Male human</desc>
                <circle cx="10" cy="10" r="10" />
                <line x1="10" y1="20" x2="10" y2="44" />
                <polyline points="1 58,10 44,19 58" />
                <polyline points="1 24,10 30,19 24" />
            </g>

            <g id="woman" style="fill:none;stroke: black;">
                <desc>Female human</desc>
                <circle cx="10" cy="10" r="10" />
                <polyline points="10 20,10 34,0 44,20 44,10 34" />
                <line x1="4" y1="58" x2="8" y2="44" />
                <line x1="12" y1="44" x2="16" y2="58" />
                <polyline points="1 24,10 30,19 24"/>
            </g>
            <g id="couple">
                <desc>Male and female stick figures</desc>
                <use xlink:href="#woman" x="0" y="0" />
                <use xlink:href="#man" x="25" y="0" />
            </g>
        </defs>
        <!-- 利用组合定义 -->
        <use xlink:href="#house" x="0" y="0" style="fill:#cfc;" />
        <use xlink:href="#couple" x="70" y="40" />

        <use xlink:href="#house" x="120" y="0" style="fill:#99f;" />
        <use xlink:href="#couple" x="190" y="40" />

        <use xlink:href="#woman" x="0" y="145" />
        <use xlink:href="#man" x="25" y="145" />
        <use xlink:href="#house" x="65" y="105" style="fill:#c00;" />
    </svg>

效果图：

<use>元素并不限制只能使用同一文件内的对象，事实上xlink:href属性可以指定任意有效的文件或者URI。这使得我们可以将一组公用元素集合在一个SVG文件内，然后在其他文件中选择性地使用它们。比如嗯嘛可以创建一个名为identity.svg的文件，该文件包含你的组织要使用的所有标识图形：

        <g id="company_mascot">
            <!-- 绘制企业吉祥物 -->
        </g>

        <g id="company_logo" style="stroke: none;">
            <polygon points="0 20,20 0,40 20,20 40" style="fill:#696;" />
            <rect x="7" y="1" width="26" height="26" style="fill:#c9c;" />
        </g>
        <g id="partner_logo">
            <!-- 绘制合作伙伴的logo -->
        </g>

然后用如下方式引用它们：

<use xlink:href="identity.svg#company_logo" x="200" y="200" />

出于安全问题，并非所有的SVG阅读器都支持外部引用，尤其是Web浏览器。有些浏览器（尤其是IE）完全不支持外部文件引用。其他浏览器也只允许<use>元素引用同一域下的文件或者专门配置了允许跨域使用的Web服务器上的文件。

5.3.4 <symbol>元素

<symbol>元素提供了另一种组合元素的方式。和<g>元素不同，<symbol>元素永远不会显示。因此我们无需把它放在<defs>规范内。然而，我们仍习惯将它放到<defs>中，因为symbol也是我们定义的供后续使用的元素。symbol还可以指定viewBox和preserveAspectRatio属性，通过给<use>元素添加width和height属性就可以让symbol适配视口大小。

　　<svg width = "200px" height = "200px" viewBox = "0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <title>Symbols vs.groups</title>
        <desc>Use</desc>
        <defs>
            <g id="octagon" style="stroke: black;">
                <desc>Octagon as group</desc>
                <polygon points="36 25,25 36,11 36,0 25,0 11,11 0,25 0,36 11" />
            </g>
            <symbol id="sym-octagon" style="stroke: black;" preserveAspectRatio="xMidYMid slice" viewBox="0 0 40 40">
                <desc>Octagon as symbol</desc>
                <polygon points="36 25,25 36,11 36,0 25,0 11,11 0,25 0,36 11" />
            </symbol>
        </defs>
        <g style="fill:none;stroke:gray;">
            <rect x="40" y="40" width="30" height="30" />
            <rect x="80" y="40" width="40" height="60" />
            <rect x="40" y="110" width="30" height="30" />
            <rect x="80" y="110" width="40" height="60" />
        </g>
        <use xlink:href="#octagon" x="40" y="40" width="30" height="30" style="fill:#c00;" />
        <use xlink:href="#octagon" x="80" y="40" width="40" height="60" style="fill:#cc0;" />
        <use xlink:href="#sym-octagon" x="40" y="110" width="30" height="30" style="fill:#cfc;" />
        <use xlink:href="#sym-octagon" x="80" y="110" width="40" height="60" style="fill:#699;" />
    </svg>

效果图：

5.3.5<image>元素

<use>元素允许我们复用SVG文件的一部分，而<image>元素可以包含一个完整的SVG或者栅格文件。如果包含一个SVG文件，其视口会基于引用文件的x、y、width和height属性来建立。如果包含一个栅格文件，它会被缩放以适配该属性指定的矩形。

以下实例展示如何在SVG文件内包含JPEG文件。

使用<defs>元素：

　　<svg width = "310px" height = "310px" viewBox = "0 0 310 310" xmlns="http://www.w3.org/2000/svg">
        <ellispse cx="154" cy="154" rx="150" ry="120" style="fill:#999999;" /><!-- 创建一个灰色椭圆模拟投影 -->
        <ellispse cx="152" cy="152" rx="150" ry="120" style="fill:#cceeff;" /><!-- 创建主蓝色椭圆形。因为它在灰色椭圆之后出现，因此它显示在灰色椭圆之上。 -->
        <image xlink:href="kwanghwamun.jpg" x="72" y="92" width="160" height="120" /><!-- 指定要包含文件的URI、图像左上角位置，应该被缩放的宽度和高度 -->
    </svg>

如果图像文件的尺寸与元素的宽度和高度不匹配，<image>元素可以使用preserveAspectRatio属性只是浏览器应该怎么处理。其默认值是xMIdYMid meet，这会缩放图像并居中显示在指定的矩形中。如果包含一个SVG文件，还可以在preserveAspectRatio值的开头添加defer关键字（比如defer xMidYMid meet）；这样如果包含的图像也有preserveAspectRatio属性，则会使用图像的属性来替代默认值。

o'reill的svg精髓（第二版）学习笔记——第五章

第五章文档结构 5.1结构与表现XML的目标之一便是提供一种能将结构从视觉表示中独立出来的方法。但是不幸的是，关于XML的很多讨论都强调结构而非表现。我们将通过详细讨论如何在SVG中指定表现来纠正这一错误。5.2在SVG中... 查看详情

o'reill的svg精髓（第二版）学习笔记——第十一章

第十一章：滤镜11.1滤镜的工作原理当SVG阅读器程序处理一个图形对象时，它会将对象呈现在位图输出设备上；在某一时刻，阅读器程序会把对象的描述信息转换为一组对应的像素，然后呈现在输出设备上。例如我们用SVG的<filt... 查看详情

o'reill的svg精髓（第二版）学习笔记——第四章

第四章：基本形状4.1线段SVG可以使用<line>元素画出一条直线段。使用时只需要指定线段起止点的x和y坐标即可。指定坐标时可以不带单位，此时会使用用户坐标，也可以带上单位，如em、in等。<linex1="start-x"y1="start-y"x2="end-x"... 查看详情

gcc学习[第二版]

gcc简单介绍1、 gcc是GNU Compiler Collection的缩写。最初是作为C语言的编译器（GNU C Compiler）,作者为Richard Stallman。是GNU项目的奠基者;如今已经支持多种语言。如C、C++、Java、Pascal、Ada、COBOL语言等。 2... 查看详情

gcc学习[第二版]

头文件与库文件1、概要在使用C语言和其它语言进行程序设计的时候，我们须要头文件来提供对常数的定义和对系统及库函数调用的声明。库文件是一些预先编译好的函数集合，那些函数都是依照可重用原则编写的。它们通常... 查看详情

javaee学习流程（第二版更新）

这周有点堕落了，这两天啥都没写，就顾上刷《庆余年》了??，今天拿还没完成的javaEE的学习流程来充个数，这个是我在原来基础上增加和更新后的学习流程。里面增加了现有的一些新技术，同时也增加了我了解到的技术和框架... 查看详情

学习资料

PCA和LDA-百面机器学习，统计学习方法（第二版），李政轩LinearDiscriminantAnalysisSVM-林轩田机器学习技法，统计学习方法（第二版）KernelTrick-李政轩Adaboost-林轩田机器学习技法，统计学习方法（第二版）决策树-统计学习方法（第二... 查看详情

gcc学习[第二版](代码片段)

gcc简介1、gcc是GNU Compiler Collection的缩写。最初是作为C语言的编译器（GNU C Compiler）,作者为Richard Stallman，是GNU项目的奠基者;现在已经支持多种语言，如C、C++、Java、Pascal、Ada、COBOL语言等。 2、主要特... 查看详情

学习bash第二版学习笔记1——bash的简介检测和安装

shell区别于内核是一款命令解析程序。BourneAgainshell(BASH),创建用于GNU项目。GNU项目由FreeSoftwareFoundation（FSF）的RichardStallman始创，用于创建一个UNIX兼容的操作系统，并使用该免费的发布版本替代所有的商业UNIX版本。 ??你可能不... 查看详情

mongodb权威指南第二版学习笔记——mongodb简介

MongoDB简介　　MongoDB在功能和复杂性之间取得了很好的平衡，并且大大简化了原先十分复杂的任务，它具备支撑今天主流web应用的关键功能：索引、复制、分片、丰富的查询语法，特别灵活的数据模型。与此同时还不牺牲速度。... 查看详情

李航统计学习方法(第二版)基本概念：泛化能力

1泛化误差学习方法的泛化能力(generalizationability)是指由该方法学习到的模型对未知数据的预测能力，是学习方法本质重要的性质。泛化误差反映了学习方法的泛化能力，如果一种方法学习的模型比另一种方法学习的模型具有... 查看详情

mongodb权威指南第二版学习笔记—增删改文档下

$slice如果希望数组的最大长度是固定的，那么可以将 $slice 和 $push 组合在一起使用，就可以保证数组不会超出设定好的最大长度。$slice 的值必须是负整数。假设$slice的值为10，如果$push 后的数组的元素个数... 查看详情

《tensorflow实战google深度学习框架（第二版）》学习笔记及书评(代码片段)

《TensorFlow实战Google深度学习框架（第二版）》学习笔记文章目录《TensorFlow实战Google深度学习框架（第二版）》学习笔记写在前面1.TensorFlow图像处理函数学习总结2.TensorFlow图像预处理完整样例3.TensorFlow多线程输入... 查看详情

李沐《动手学深度学习》第二版pytorch笔记1环境搭建(代码片段)

李沐《动手学深度学习》第二版pytorch笔记1搭建环境文章目录李沐《动手学深度学习》第二版pytorch笔记1搭建环境此时尚有耐心虚拟环境搭建创建虚拟环境查看已有的虚拟环境激活虚拟环境安装深度学习框架和d2l软件包安装d2l安... 查看详情

tensorflow深度学习中文第二版·翻译完成(代码片段)

6.HttpServletResponseweb服务器接收到客户端的HTTP请求，针对这个请求，分别创建一个代表请求的HttpServletRequest对象和一个代表响应的HttpServletResponse对象；如果要获取客户端请求过来的参数：找HttpServletRequest如果要给客户响应一些信... 查看详情

人工智能系列经典图书翻译可解释机器学习（第二版）

...中的错漏之处，不胜感激！可解释机器学习（第二版）目录第1章前言第2章简介第3章解释性第4章数据集第5章解释模型第6章模型不可知论方法第7章基于实例的解释第8章全局模型无关方法第9章局部模型无关方法第1... 查看详情

中级财务会计学习指导与习题集第二版路国平黄中生课后答案

路国平黄中生中级财务会计学习指导与习题集（第二版）习题答案本书与主教材《中级财务会计》（第二版）（路国平主编）配套使用，以企业（公司）为背景；以“决策有用论”为基础；以会计准则（包括国际会计准则）为依... 查看详情

人工智能系列经典图书翻译可解释机器学习（第二版）参考文献

参考文献“DefinitionofAlgorithm.”https://www.merriam-webster.com/dictionary/algorithm.(2017).Aamodt,Agnar,andEnricPlaza.“Case-basedreasoning:Foundationalissues,methodologicalvariations,andsystemapproaches.”AIcommunications7.1(1994):39-59.Adebayo,Julius,JustinGilmer,MichaelMuelly,IanGoodfe... 查看详情