响应式Web设计:HTML5和CSS3实战(第2版)
第七章 SVG与响应式Web设计
- SVG可伸缩矢量图是一种不会过时的、能够轻松解决多屏幕分辨率问题的技术
- SVG的大小比位图要小很多
7.1 SVG特点
- SVG是XML中用于描述二维图形的语言
- SVG仅仅保存矢量点
7.2 SVG的关键点（实现方法）
- 根元素：宽、高和视口
- viewbox定义了SVG中所有形状都需要遵循的坐标系
- viewbox属性可以让你伸缩图片
7.3 SVG制作工具
- Adobe Illustrator
- Sketch
- InkScape（免费开源）
7.4 Web中插入SVG
- 使用img标签
- 使用object标签
- 建议不要省略data和type属性
- 作为背景图
- 对于老旧机型可以有后备策略
.item{
background: url('aa.png') no-repeat;
background: url('aa.svg') left top / auto no-repeat;
}
- Modernizer对不支持svg的浏览器会有“no-svg”的类
- data URI的介绍
- 将url的图片地址换为一串“统一资源标识符”
- data URI有很多编码方式，建议不要使用base64格式，因为它对SVG的压缩不如text好
- 推荐工具：Iconizr
- 如果想为它加上动画效果，或者使用js来插入数据，最好还是把SVG内联到HTML上
7.5 内联SVG
-
由于SVG是XML文档，所以可以直接插入到HTML中
- 如果删掉宽高，SVG就会自动缩放，充满容器
-
利用符号复用图形对象
- defs元素中的symbol元素是定义一个形状以供后期使用
- 后文中可以用use标签来将已经定义好的图形对象使用起来，通过xlink属性来选择引入的对象
根据上下文改变svg颜色
.svg{
fill: #f90;
}
- 复用外部图形对象资源
<use xlink:href="defs.svg#icon-home"></use>- 意为链接到外部defs.svg文件，选用其中id为icon-home的图形
- 好处为
- 可以为浏览器缓存
- 防止代码中有一堆svg符号
- IE9-11不支持，可以用"svg for everybody"的ployfill脚本解决限制
- 浏览器兼容性
- IE9-11中无法引用外部svg资源
- IE中无论采用什么方式插入svg，都会把外部样式表的样式应用到svg上
- 其他浏览器都是只有在object标签引入svg时才会应用那些样式
- IE不允许css为svg添加动画，只能通过JS为svg添加动画
7.6 为svg添加样式
- 外部样式表
- 在svg标签前加
<?xml-stylesheet href="styles.css" type="text/css"?>
- 在svg标签前加
<?xml-stylesheet href="styles.css" type="text/css"?>
<svg width="198" height="188" viewBox="0 0 198 188" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- 内部样式表
<defs>
<style type="text/css">
<![CDATA[
#star_Path {
stroke: red;
}
]]>
</style>
</defs>
+ 上例代码中的stroke属性。它并不是CSS属性，而是SVG属性。
+ 在样式中可以使用不少的SVG属性（无论是内联样式抑或外部样式表）。例如
* 对于SVG，你不用指background-color，而是需要定义fill。
* 你无需定义border，而是定义stroke-width。
- 用CSS为SVG添加动画
- 注意SVG上的transform-origin被设置为50% 50%。这是因为与CSS不同，SVG默认的transform-origin不是50% 50%（元素的正中间），而是0 0（元素的左上角）。如果不指定该属性，星形会围绕左上角进行旋转。
<div class="wrapper">
<svg width="198" height="188" viewBox="0 0 220 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Star 1</title>
<defs>
<style type="text/css">
<![CDATA[ @keyframes
spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.star_Wrapper {
animation: spin 2s 1s;
transform-origin: 50% 50%;
}
.wrapper {
padding: 2rem;
margin: 2rem;
}
]]>
</style>
<g id="shape">
<path fill="#14805e" d="M50 50h50v50H50z" />
<circle fill="#ebebeb" cx="50" cy="50" r="50" />
</g>
</defs>
<g class="star_Wrapper" fill="none" fill-rule="evenodd">
<path id="star_Path" stroke="#333" stroke-width="3" fill="#F8E81C" d="M99 154l-58.78 30.902 11.227-65.45L3.894 73.097l65.717-9.55L99 4l29.39 59.55 65.716 9.548-47.553 46.353 11.226 65.453z" />
</g>
</svg>
</div>
- 使用JavaScript添加SVG动画
- 当一个SVG是通过内联或者object标签的方式插入到页面时，我们可以通过JavaScript直接或者间接地控制它。
- 间接的意思是指我可以通过JavaScript来改变它或者它的父类的class，从而触发动画效果。
svg {
/* 没有动画效果*/
}
.added-with-js svg {
/* 动画*/
}
- 推荐使用:
- GreenSock动画平台（http://greensock.com/）
- Velocity.js（http://julian.com/research/velocity/）
- Snap.svg（http://snapsvg.io/）
7.9 优化SVG
- 推荐使用:
- SVGO（https://github.com/svg/svgo）
- SVGOMG（https://jakearchibald.github.io/svgomg/）
- 这是一个浏览器版本的SVGO，你可以切换不同的优化插件，并且可以看到即时的优化反馈。
