SVG学习笔记

一. SVG是什么?

  1. SVG 意为可缩放矢量图形(Scalable Vectors Graphics)。
  2. SVG 图形在放大或者改变尺寸的情况下,其图形的质量不会有所损失。
  3. SVG 使用 XML 格式定义图形。
  4. SVG 文件是纯粹的 XML。
  5. SVG 是万维网联盟的标准。
  6. SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。

二. 代码解释(书p138实例)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="198px" height="188px" viewBox="0 0 198 188" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
    <title>Star 1</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <polygon id="Star-1" stroke="#979797" stroke-width="3" fill="#F8E81C" sketch:type="MSShapeGroup" points="99 154 40.2214748 184.901699 51.4471742 119.45085 3.89434837 73.0983006 69.6107374 63.5491503 99 4 128.389263 63.5491503 194.105652 73.0983006 146.552826 119.45085 157.778525 184.901699 "></polygon>
    </g>
</svg>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
  • XML
    Extentsible Markup Language(可扩展标记语言),用来定义其它语言的一种元语言,其前身是SGML(标准通用标记语言)。它没有标签集(tag set),也没有语法规则(grammatical rule),但是它有句法规则(syntax rule)。
▲XML和HTML的区别

① XML不是HTML的替代品,XML和HTML是两种不同用途的语言。
② XML是用来描述数据的,重点是:什么是数据,如何存放数据
③ HTML是用来显示数据的,重点是:显示数据以及如何显示数据更好上面
HTML是与显示信息相关的, XML则是与描述信息相关的。

  • version="1.0" 定义所使用的SVG版本
  • standalone="no" standalone 这个属性规定这个 SVG 文件是否是“独立的”,还是有引用外部文件。standalone="no" 意味着 SVG 文件不是独立的,会引用外部文件。

<svg width="198px" height="188px" viewBox="0 0 198 188" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
  • width="198px" height="188px" viewBox="0 0 198 188"
    SVG的根元素:width、height和viewbox属性
viewbox(视框)
解释 定义了SVG中所有形状都需要遵循的坐标系
包含4个参数的列表 min-x, min-y, width and height, 以空格或者逗号分隔开
属性 preserveAspectRatio属性表示是否强制进行统一缩放
可用元素 <svg><symbol><image><marker><pattern><view>
▲▲▲ 命名空间
<svg xmlns="http://www.w3.org/2000/svg">
<!-- more tags here -->
</svg>

命名空间声明由xmlns属性提供。此属性表示<svg>标记及其子标记属于名称空间为“http://www.w3.org/2000/svg”的XML方言,当然,它是SVG。注意,命名空间声明只需要在根标记上提供一次。声明定义了默认命名空间,因此用户代理知道所有<svg>标签的后代标签也属于同一命名空间。用户代理检查他们是否属于同一个命名空间,如果是的话才去如何处理命名空间下的标签标记。
  注意,命名空间名称只是字符串,尽管SVG命名空间名称看起来像URI,但这并不重要。URI通常被使用,因为它们是唯一的,目的不是“链接”某处。(事实上​​,URI经常使用,通常使用术语“命名空间URI”而不是“命名空间名称”。)

  • 重新声明默认命名空间
<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <!-- some XHTML tags here -->
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
    <!-- some SVG tags here -->
    </svg>
  <!-- some XHTML tags here -->
  </body>
</html>

在此示例中,根<html>标签上的xmlns属性将默认名称空间声明为XHTML。因此,除了<svg>标记,用户代理将其及其所有子标记解释为属于XHTML。 <svg>标记具有自己的xmlns属性,通过重新声明默认命名空间,这告诉用户代理,<svg>标记及其后代(除非他们也重新编写默认命名空间)属于SVG。

  • 声明命名空间前缀
<svg xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
  <script xlink:href="cool-script.js" type="text/ecmascript"/>
</svg>

命名空间前缀用于前缀属性名称和标签名称。这是通过在属性名称之前放置命名空间前缀和冒号来实现的,如上例中的<script>标记所示。这告诉用户代理该特定属性属于分配给命名空间前缀(XLink)的命名空间,并且它是可以用于具有相同含义的其他标记上。
  请注意,使用未绑定到命名空间名称前缀是XML错误。尽管xlink:href属性不会导致错误,但上面示例中由xmlns:xlink属性创建的绑定是绝对必要的。这个XLink属性在SVG中经常在<a>,<use>和<image>标签等中使用,所以最好在文档中始终包含XLink声明。


<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
  • stroke 图形轮廓的颜色
    stroke-width 图形轮廓的宽度
    这两个属性控制图形的轮廓该怎么显示。这里把圆形的轮廓设置为 1px 宽,边框无填充颜色。
  • fill 填充颜色(设置形状内的颜色)
  • fill-rule 填充规则
解释 如何判断路径的哪一侧在路径所构成的形状的内部,从而判断fill属性如何给这个形状上色。
类别 外观属性
nonzero / evenodd / inherit
  1. nonzero

    这个值确定了某点属于该形状的“内部”还是“外部”。从点向任意方向的无限远处绘制射线,然后检测形状与射线相交的位置。开始于0数,射线上每次从左向右相交就加1,每次从右向左相交就减1。数一下相交次数,如果结果是0,点就在路径外面,否则认为,点在路径里面。
    nonzero "非零"
  2. evenodd
    这个值用确定了某点属于该形状的“内部”还是“外部”。从点向任意方向的无限远处绘制射线,并数一数给定形状与射线相交的路径段的数目,如果数目是奇数的,点在内部,如果数目是偶数的,点在外部。


    evenodd "奇偶"

  • DTD文件类型
    DTD一共有三大类型:
    (1)严格型的DTD
    在严格型的DTD中,不能再使用各种表现的标记。如:<font>、<b>、<body bgColor>
    要求必须使用CSS来取代各种表现标记。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    (2)过渡型的DTD
    在过渡型的DTD中,可以继续使用HTML中的表现的写法。
    这些表现标记,还可以继续使用。如:<font>、<b>、<body bgColor> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    (3)框架的DTD
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

三. 在web页面中插入SVG

  • 使用img标签
<img src="xxxx.svg" alt="对图片的文字描述">
  • 使用object标签
<object data="img/svgfile.svg" type="image/svg+xml">

data属性是你链接SVG资源的方式
type属性描述了内容的MIME类型
image/svg+xml是SVG的MIME类型(互联网媒体类型:其消息能包括文本、图像、音频、视频以及其他应用程序专用的数据)

  • 把SVG作为背景图像插入
  • 内联
    不同插入方式下可以使用的功能.png

四. 添加样式和动画

  • 使用外部样式表为SVG添加样式
1. <link href="styles.css" type="text/css" rel="stylesheet"/>
2. <?xml-stylesheet href="styles.css" type="text/css"?> ◀better!
  • 使用内联样式为SVG添加样式
<defs>
  <style type="text/css">
    <![CDATA[
        #star_path {
            stroke: red;
        }
    ]]>
  </style>
</defs>
  • 用CSS为SVG添加动画
    animation-动画
.star_Wrapper {
    animation: spin 2s 1s;
    transform-origin: 50% 50%;
}

资料来源
张宝的博客-SVG是什么?
DTD文件类型
XML
fill-rule
SVG命名空间

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,482评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,377评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,762评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,273评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,289评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,046评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,351评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,988评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,476评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,948评论 2 324
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,064评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,712评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,261评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,264评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,486评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,511评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,802评论 2 345

推荐阅读更多精彩内容

  • SVG 学习笔记 SVG是什么 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) S...
    Penn_Xu阅读 958评论 0 1
  • SVG概述 SVG : 可缩放矢量图形,使用 XML 格式定义图像。 SVG in HTML 直接嵌入HTML文档...
    datasun阅读 962评论 0 0
  • SVG学习笔记 简介 SVG使用XML来描述二维图形和绘图程序的语言。 SVG形状 SVG在HTML页面 SVG ...
    EL_PSY_CONGROO阅读 243评论 0 0
  • HTML、XML、XHTML 有什么区别 1.HTML 是用来描述网页的一种语言,指的是超文本标记语言 (Hype...
    饥人谷_牛牛阅读 681评论 0 2
  • 记录Android NDK开发相关知识,前期环境配置 自行谷歌 Android NDK 提供的组件 Android...
    jiantao阅读 818评论 0 50