Styling & Animating SVG

時間 2019-11-06

標籤 styling animating svg 简体版

原文原文鏈接

Styling & Animating SVG

@(SVG 專用)[SVG]php

前言

什麼是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.css

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
svg廣告 http://codepen.io/Yunkou/full/sadDB/
數據可視化1 http://raphaeljs.com/analytics.html
數據可視化2 http://raphaeljs.com/github/dots.html
數據可視化3 http://raphaeljs.com/australia.html

Why SVGs?

accessible
Very Good Browser Support
Smaller sizes (can be gzipped)
Scalable & Resolution Independent 不受約束的等比縮放
Interactive and Styleable (CSS and Javascript)

設計師篇

矢量圖形前景

扁平化趨勢
顯示技術的革新
效率優先
響應式設計
豐富的動畫及互動體驗
應用環境和技術的改善

工具

Adobe Illustratorhtml
Inkscape (Free)git
Sketch (Mac OS X only)github

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/tucEBide

SVG Attributes

詳情參見：svg

行內樣式（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; }post
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 */}