A. html5 svg 數據怎麼生成
去找 SVG 轉換器，就能把圖片從點陣圖轉換成 SVG 代碼
B. 如何在HTML5中使用SVG
SVG 即 Scalable Vector Graphics，是一種用來繪制矢量圖的 HTML5 標簽。只需定義好XML屬性，就能獲得一致的圖像元素。
使用SVG之前先將標簽加入到HTML body中。就像其他的HTML標簽一樣，你可以為SVG標簽為之添加ID屬性。也可以為之添加css樣式，例如「border-style:solid;border-width:2px;」。SVG標簽跟其它的HTML標簽有通用的屬性。可以用height="100px" width="200px" 為其添加高度和寬度。
現在就將SVG元素加入到HTML代碼中，SVG提供很多繪圖形狀，例如線條、圓、多邊形等。
SVG線條：
SVG線條用標簽定義，在此標簽內還可以定義其他的屬性。
該標簽包括像起點坐標(x1,y1)和終點坐標(x2,y2)這樣的屬性。指定x1,y1,x2,y2值來設定起點終點坐標。在指定好坐標後，可以為之添加一些樣式，在style屬性中使用「stroke:Green;」為線條指定顏色。同樣也可以用stroke-width:2為線條設置寬度。
<!DOCTYPE html>
<head>
<title>Mrbool.com - HTML5 Tutorials</title>
</head>
<body>
<h2>HTML5 SVG Line Example</h2>
<svg id="svgLineTutorial" style="border-style:solid;border-width:2px;" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">
<!--<line x1="0" y1="0" x2="50" y2="200" style="stroke:rgb(100,100,0);stroke-width:5"/>-->
<line x1="10" y1="20" x2="100" y2="200" style="stroke:Green;stroke-width:2"/>
</svg>
</body>
</html>
C. 如何在HTML5中使用SVG畫圖
svg跟html標簽一樣使用就可以了，<div><svg><path></path></svg></div>
或者你也可以直接在網路搜索《如何在HTML5中使用SVG》第一條就說得很詳細，用SVG畫直線，畫圓，橢圓，矩形。裡面都有詳細的介紹；
D. html 直接使用svg圖片不能顯示
html 直接使用svg圖片不能顯示是設置錯誤造成的，解決方法為：
1、點擊電腦開始菜單，找到Inscape工具並點擊打開。
E. snap.svg 可以直接操作svg元素嗎
有人說不會 SVG 的前端開發者不叫開發者，而叫愛好者。前端不光是 Angularjs 了，這時候再不學 SVG 就晚了！（如果你只會 jQuery 就當我沒說。。。）這里我就給大家分享一個前幾天在別處看到的一個高大上的 SVG 效果，左邊菜單彈出來會動動彈的說，鏈接點這里。 當時我就震驚了，今天抽空搞清了源碼，然後下面是我潛心研究後做出來的 Demo，雖然比較粗糙，但還是很洋氣的感覺呢。下面我就這個 DEMO 跟大家分享一下。 jsfiddle.net/windwhinny/n6w1ur5k/3/ 本案例需要有些 PS 或者 AI 中路徑的知識，下面是本例中運涉及到的知識點和工具： snap.svg svg path data Adobe Illustrator animation timing 先給出原理：根據時間變換坐標。如下圖所示，本例其實就是 A、B、C 三條線之間的轉換，A 是初始狀態，點擊後經過 B 最後形成 C。其中有兩次動畫，分別是 A-B 和 B-C，而這兩次動畫的 timing function 和時間都是不同的。 第一步：畫草稿 做動畫前第一步就是畫草稿（如上圖），我一般用 AI 來畫，因為 AI 可以精確的控制元素尺寸和位置，而且其原理和 SVG 是一樣的。 然後有的同學就會說，「老濕，是不是要保存為 SVG 格式的，然後做修改啊？」 錯 畫草稿圖的目的只是為了方便的確定每個點的坐標，自己算太麻煩了，而且還容易出錯。除此之外 AI 沒有任何作用。AI 生成的 SVG 文件在此例中根本不能拿來用，因為其中的路勁點太混亂了，下面會詳說。 什麼？你不會用 AI ？ 如果你還想在前端這條路上走下去的話，那現在就去學吧。（在這里我想吐槽一下，PS 是用來處理點陣圖片的，根本不適合拿來做設計圖。相比之下 AI 才是做這個的，google 給出的 metrial design 布局模板全都是 AI 格式的。但國內不管是什麼企業，用 PS 都好像很開心的樣子，不知道為什麼。） 第二步：計算路徑 這一步就比較復雜了，上面說過了，這個動畫其實就是坐標之間轉換。而從四邊形到圓弧之間的轉換不光是坐標位移而已，還有曲線弧度的轉換。上面的設計圖直接保存為 SVG 後代碼如下： 復制代碼 代碼如下: <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="圖層_1" xmlns="/2000/svg" xmlns:xlink="/1999/xlink" x="0px" y="0px" viewBox="0 0 175 175" enable-background="new 0 0 175 175" xml:space="preserve"> <!-- 路徑 A --> <path fill="none" stroke="#BF3A41" stroke-miterlimit="10" d=" M12.5,12.5 h75 h75 v75 v75 h-75 h-75 v-35 V12.5z"/> <!-- 路徑 B --> <path fill="none" stroke="#0000FF" stroke-miterlimit="10" d=" M37.5,37.5 c0,0,10-25,50-25 s50,25,50,25 s25,10,25,50 s-25,50-25,50 s-10,25-50,25 s-50-25-50-25 s-25.1-10-25.1-50 S37.5,37.5,37.5,37.5z"/> <!-- 路徑 C --> <path fill="none" stroke="#000000" stroke-miterlimit="10" d=" M37.5,37.5 h50 h50 v50 v50 h-50 h-50 v-50 V37.5z"/> </svg> 我們只需要關注路徑的 d 屬性就行了，可以看出，AB 兩個路徑之間還是可以互相轉換的，但他們和 C 路徑（有弧線的路徑）之間就不能轉換了。他們所用到的繪圖命令都不同，AB 兩個都是矩形，繪圖時用到的都是 h、v，也就是橫縱之間的位移，畫出來的都是橫豎線。而 C 路勁用到的都是 s、c這些命令，畫出來的都是曲線。所以 AI 給出來的圖我們不能用，要自己根據 svg path data 重新繪制一遍。 下面我參照 AI 設計圖重新繪制的三條路徑： 復制代碼 代碼如下: <!-- 路徑 A --> <path d=" M37.5,37.5 S87.5,37.5,87.5,37.5 S137.5,37.5,137.5,37.5 S137.5,87.5,137.5,87.5 S137.5,137.5,137.5,137.5 S87.5,137.5,87.5,137.5 S37.5,137.5,37.5,137.5 S37.5,87.5,37.5,87.5 S37.5,37.5,37.5,37.5z"> <!-- 路徑 B --> <path d=" M 37.5,37.5 S47.5,12.5,87.5,12.5 S127.5,25,137.5,37.5 S162.5,47.5,162.5,87.5 S150,127.5,137.5,137.5 S127.5,162.5,87.5,162.5 S47.5,150,37.5,137.5 S12.5,127.5,12.5,87.5 S25,47.5,37.5,37.5z"> <!-- 路徑 C --> <path d=" M12.5,12.5 S87.5,12.5,87.5,12.5 S162.5,12.5,162.5,12.5 S162.5,87.5,162.5,87.5 S162.5,162.5,162.5,162.5 S87.5,162.5,87.5,162.5 S12.5,162.5,12.5,162.5 S12.5,127.5,12.5,127.5 S12.5,12.5,12.5,12.5z"> 有過設計基礎的同學應該明白上面代碼的含義，就是將所有錨點轉換成平滑，然後再更改手柄的位置。形狀沒變，雖然代碼多了不少，但是把繪制命令都變成了 S ，這樣三條路徑就只有數值之間的不同了。而動畫的過程就是數值之間的轉換。 第三步：Timing 這一步就是設定動畫的時間點和 timing function 。時間點比較好說，A-B 和 B-C 我設置的分別是300毫秒和400毫秒。 timing function 就是我們在做 CSS 動畫中運用到的 animation-timing-function 屬性，比較常見的有 ease、linear、easein，我們也可以用貝塞爾曲線自己定製。但是CSS的 timing function 比較簡單，只能定義一條均勻的曲線，A-B 轉換用到的 ease-out，但是 B-C 為了體現彈動的效果，所用到的 timing-function 就不是一條均勻曲線這么簡單了。 上面列出了一些比較常用的 timing-function ，其中大概分為 ease、bounce、elastic 三類。ease 一般用作減速或者加速動效。bounce如同他的曲線圖一樣，一般用作小球落地那種動效。而 elastic 一般用在如琴弦一樣的動效上，這種動效一個特點就是有部分偏移到負坐標上了，而 B-C 用到的就是這個,如下圖。 根據上面已經畫出來的路徑，結合動畫，代碼就出來了： 復制代碼 代碼如下: var svg=Snap("#svg"); var pathes=[ "M37.5,37.5S87.5,37.5,87.5,37.5S137.5,37.5,137.5,37.5S137.5,87.5,137.5,87.5 S137.5,137.5,137.5,137.5S87.5,137.5,87.5,137.5S37.5,137.5,37.5,137.5S37.5,87.5,37.5,87.5S37.5,37.5,37.5,37.5z", "M 37.5,37.5 S47.5,12.5,87.5,12.5 S127.5,25,137.5,37.5 S162.5,47.5,162.5,87.5 S150,127.5,137.5,137.5 S127.5,162.5,87.5,162.5 S47.5,150,37.5,137.5 S12.5,127.5,12.5,87.5 S25,47.5,37.5,37.5z", "M12.5,12.5S87.5,12.5,87.5,12.5S162.5,12.5,162.5,12.5S162.5,87.5,162.5,87.5S162.5,162.5,162.5,162.5S87.5,162.5,87.5,162.5S12.5,162.5,12.5,162.5S12.5,127.5,12.5,127.5S12.5,12.5,12.5,12.5z" ]; var path=svg.path(pathes[0]); path.attr({ fill:"#2E70FF" }); function animateIn(callback){ path.animate({ d:pathes[1] },300,mina.easeout,function(){ path.animate({ d:pathes[0] },400,mina.elastic,callback) }); }; function animateOut(callback){ path.animate({ d:pathes[1] },300,mina.easeout,function(){ path.animate({ d:pathes[2] },400,mina.elastic,callback) }); };
F. web開發用svg和png哪個好
正規的話，svg的比較好，圖片不會因為大小而出現問題，
但是沒有的話，png也可以，
G. 誰能推薦一款關於Web前端可以在canvas或SVG上畫網路拓撲圖（如下圖所示）的JS庫
http://www.draw2d.org/draw2d/
draw2d touch，最近一直在看，挺強大的，使用的svg實現的。
H. 如何在 HTML5 中設置 svg 的大小
SVG 即 Scalable Vector Graphics，是一種用來繪制矢量圖的 HTML5
標簽。你只需定義好XML屬性，就能獲得一致的圖像元素。
使用SVG之前先將標簽加入到HTML
body中。就像其他的HTML標簽一樣，你可以為SVG標簽為之添加ID屬性。也可以為之添加css樣式，例如「border-style:solid;border-width:2px;」。SVG標簽跟其它的HTML標簽有通用的屬性。你可以用height="100px"
width="200px" 為其添加高度和寬度。
現在就將SVG元素加入到我們HTML代碼中，SVG提供很多繪圖形狀，例如線條、圓、多邊形等。
SVG線條：
SVG線條用標簽定義，在此標簽內你還可以定義其他的屬性。
該標簽包括像起點坐標(x1,y1)和終點坐標(x2,y2)這樣的屬性。指定x1,y1,x2,y2值來設定起點終點坐標。在指定好坐標後，可以為之添加一些樣式，在style屬性中使用「stroke:Green;」為線條指定顏色。同樣你也可以用stroke-width:2為線條設置寬度。
SVG畫圓：
SVG提供了一種不同的標簽來畫圓。正如你看到的下面代碼，circle有個id為myCircle。為了定義圓的中心以及半徑，使用cx="55"
cy="55"以及r="50"屬性分別定義。使用fill="#219E3E"為圓填充顏色。同樣你可以用stroke="#17301D"
stroke-width="2"定義圓周線條顏色和寬度。
SVG矩形:
同樣的使用標簽來畫矩形，我們同樣設置了 id 屬性 「myRectangle」 ,用 width="300" height="100" 定義高寬，使用
fills 屬性定義填充顏色。用 strock 定義邊框。還有一點需要注意，我用 fill-opacity="0.5" stroke-opacity="0.5"
為 stroke 和 filling 都添加了透明度。
SVG橢圓：
我們同樣是用標簽來繪制橢圓。設置其 id="myEllipse" ，給定起中心坐標 cx="120"cy="60"，長軸短軸半徑 rx="100"
ry="50",並用設置填充顏色、邊框寬度以及邊框顏色style="fill:#3F5208;stroke:black;stroke-width:3"。
SVG多邊形：
我們使用特定標簽繪制多邊形,points屬性用來定義多邊形的幾個頂點，用左邊對來定義，形如 points="10,10 75,150 150,60"
，這里定義了三個頂點(10,10),(75,150),(150,60)。同上面一樣，用
style="fill:#63BCF7;stroke:black;stroke-width:3" 定義多邊形填充顏色、邊框以及邊框寬度。
I. 什麼是可交互的SVG動畫它有哪些類型
什麼是可交互的SVG動畫?
一般來說，常見前端動畫實現方案分為三種，CSS3動畫，HTML動畫(SVG動畫)，JS動畫或者我們可以稱之為Canvas動畫。這里主要我們是要講解的是SVG動畫的實現方法。通俗來說，假如我希望動畫內容是個性化的信息填充，這樣我們就需要讓 SVG 動畫變成框架動畫，動畫的內容由後台給出再填充動畫，最後呈現給使用者。或者我希望動畫的播放進程是根據頁面滾動來觸發播放，同時動畫會和頁面的高度百分比同步進度。那這些想法的實現就需要讓 SVG 動畫來實現，設計師希望通過它能夠提高用戶體驗。
SVG動畫的類型
常見的SVG動畫有三種實現方式，具體類型大家來看一下：
1.通過原生的SVG來實現，但是這種方法的實現效率較低，而且很多較為精確的動作比較難實現;
2.通過常見的SVG動畫庫來實現，比如svg.js，snap.js之類的來實現，可以實現比較靈活的交互，復雜的線性動畫也是很難實現的;
3.結合PS,AI,CSS3來實現有，這種方法交互需要自己實現，相對會比較繁瑣，但是優勢就是可以實現一些復雜的線性動畫,而且也要求你的知識面要廣闊一些。
總之，作為交互動畫的設計師，只用前端程序對接動畫，這樣最終我們才能做到動畫和交互邏輯的完美落地。當然，想要了解更多交互設計相關資訊，請關注我們，下期咱們不見不散哦!