Styling & Animating SVG
Alt text
前言
什么是SVG?
可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。
Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.
SVG应用场景
- icon
- 数据可视化
- 在移动端flash广告的代替者
- 专题故事版
SVG 实例
- 旋转 http://tutsplus.github.io/a-beginner-s-introduction-to-css-animation/
- 小灯泡 http://codepen.io/Yunkou/full/HLhin
- 圣诞快乐 http://tympanus.net/Development/BurstingGiftBox/
- texthover http://tympanus.net/Tutorials/ShapeHoverEffectSVG/index2.html
- Border Animation Effect http://tympanus.net/Tutorials/BorderAnimationSVG/
- SVG Drawing http://tympanus.net/Development/SVGDrawingAnimation/index.html
- SVG map http://rockydo.com/svgmap/svgmap.html
- snapsvg http://snapsvg.io/demos/#display
目录
- 设计师篇
- CSSer
- JSer
Why SVGs?
- accessible
- Very Good Browser Support
- Smaller sizes (can be gzipped)
- Scalable & Resolution Independent 不受约束的等比缩放
- Interactive and Styleable (CSS and Javascript)
设计师篇
矢量图形前景
- 扁平化趋势
- 显示技术的革新
- 效率优先
- 响应式设计
- 丰富的动画及互动体验
- 应用环境和技术的改善
工具
-
Adobe Illustrator
Alt text
-
Inkscape (Free)
Alt text
-
Sketch (Mac OS X only)
Alt text
CSSer篇
引入SVG
- <img src="image.svg" alt="Site Logo" />
- <object type="image/svg+xml" data="image.svg">
<img src=”fallback.jpg”>
</object> - <embed type="image/svg+xml" src="image.svg" />
- <iframe src="image.svg">
</iframe> - <svg> … </svg>
- .el { background-image: url(image.svg); }
SVG样式
SVG Presentation Attributes
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px" viewBox="0 0 300 300">
<polygon
fill = "#FF931E"
stroke = "#ED1C24"
stroke-width = "5"
points = "279.1,160.8 195.2,193.3 174.4,280.8 117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/>
</svg>
http://codepen.io/Yunkou/full/tucEB
SVG Attributes
SVG Presentation Attributes
详情参见：
行内样式 （Inline Styles）
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 300px;" viewBox="0 0 300 300">
<polygon
style = "fill: #FF931E; stroke: #ED1C24; stroke-width: 5;"
points = "279.1,160.8 195.2,193.3 174.4,280.8 117.6,211.1 27.9,218.3 76.7,142.7 42.1,59.6 129.1,82.7 197.4,24.1 202.3,114 "/>
</svg>
http://codepen.io/Yunkou/full/tucEB
Embedded Styles (<style>) Inside svg
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="300px" viewBox="0 0 300 300">
<style type=”text/css”>
<![CDATA[
selector {/* styles */}
]]>
</style>
<g id=”..”> … </g>
</svg>
Embedded Styles (<style>) Outside svg
<!DOCTYPE html><!-- HTML5 document -->
<html> <head> ... </head> <body>
<style type=”text/css”>
/* style rules */
</style>
<!-- xmlns is optional in an HTML5 document -->
<svg version="1.1" viewBox="0 0 300 300">
<!-- SVG content -->
</svg>
</body></html>
Style Rules (Selectors)
- Type Selectors:
g {/* style a group */}
circle, rect { fill: #009966; }
-
Class and ID Selectors:
.arrow-head { /* styles / }
#bird { / styles */ } -
Dynamic Pseudo-Class Selectors:
.icon:hover, .icon:active, .icon:focus { /* styles */ } -
Pseudo-Class Selectors:
:first-child, :last-child, :nth-*-child(), :visited, :link and :lang, :last-of-type, :first-of-type, :not(), :nth-*-type(), :only-child, :only-of-type, ... -
Children Selectors:
g > circle {/* styles */}
note:伪类元素 before after 不支持
样式优先级规则
Jser
svg库
- snap.js (ADOBE 支持)
- SVG.js
范例
参考文献
-
维基百科《可缩放矢量图形》
-
Sara's blog《Styling & Animating Scalable Vector Graphics with CSS》
-
ux.etao《浅谈矢量图形前景》
-
MDN 《svg》
-
张鑫旭 《snap中API文文档》
