SVG学习笔记

作者: TROPICALlll | 来源:发表于2018-06-19 23:54 被阅读0次

SVG 学习笔记
SVG学习笔记
SVG学习笔记
SVG 学习笔记
SVG 学习笔记
SVG入门学习笔记
NFH.007 - SVG矢量图与two.js
SVG操作笔记
SVG 简介
SVG 笔记

一. SVG是什么？

SVG 意为可缩放矢量图形(Scalable Vectors Graphics)。
SVG 图形在放大或者改变尺寸的情况下，其图形的质量不会有所损失。
SVG 使用 XML 格式定义图形。
SVG 文件是纯粹的 XML。
SVG 是万维网联盟的标准。
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>

▲▲▲ 命名空间

xmlns="http://www.w3.org/2000/svg"
https://www.w3.org/2000/svg是一个XML名称空间，最早在SVG1.0规范中定义，随着2.0/3.0等版本更新其名称是可变的。随着W3C技术报告的发布逐渐添加名称。
xmlns:xlink="http://www.w3.org/1999/xlink"
https://www.w3.org/1999/xlink是XML链接语言（XLink）规范中定义的XML名称空间。
声明命名空间

<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

nonzero

这个值确定了某点属于该形状的“内部”还是“外部”。从点向任意方向的无限远处绘制射线，然后检测形状与射线相交的位置。开始于0数，射线上每次从左向右相交就加1，每次从右向左相交就减1。数一下相交次数，如果结果是0，点就在路径外面，否则认为，点在路径里面。 nonzero "非零"
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命名空间

网友评论

本文标题：SVG学习笔记

本文链接：https://www.haomeiwen.com/subject/qluoeftx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！