?
SVG 元素可以像HTML元素一樣，使用CSS keyframes和animation屬性或者CSS transitions來制作各種動畫效果。
大多數情況下，一個復雜的動畫效果需要組合多種變換效果：旋轉、傾斜、縮放以及他們的轉換和過渡效果。多數情況下，SVG元素和HTML元素在使用
transform
和
transform-origin
上是相同的。但它們之間也有不同之處，SVG元素不能使用box model來管理，因此，它沒有
margin
、
padding
、
border
或content boxes。
?
默認情況下，一個HTML元素的
transform
原點位于該元素的
(50%, 50%)
的地方，這里是元素的中心點。與之不同，SVG元素的
transform
原點位于當前用戶坐標系統的原點上，這個點是畫布的左上角位置。
假設我們有一個
<div>
和一個SVG
<rect>
元素：
<!DOCTYPE html>
…
<div style="width: 100px; height: 100px; background-color: orange"> </div>
<svg style="width: 150px; height: 150px; background-color: #eee">
<rect width="100" height="100" x="25" y="25" fill="orange" />
</svg>
?
如果我們在沒有改變原點的情況下，都將它們旋轉45度，我們將會得到下圖的效果（圖中的小圓點是它們各種的原點）。
如果我們想根據SVG元素的自身原點，而不是用戶坐標系原點來旋轉SVG圖形該怎么辦呢？我們需要使用
transform-origin
屬性來明確的設置SVG元素的
transform
原點位置。
在HTML元素上設置轉換原點是一件非常簡單的事情：你設置的任何值都是相對于元素的border box。
在SVG中，
transform
原點可以使用百分比值或一個絕度值（如像素）來設置。如果你使用百分比值來設置
transform-origin
，這個值被設置為相對于元素的bounding box，它包括用于繪制邊框的stroke。如果你使用一個絕對值來來設置
transform-origin
，那么這個值被設置為相對于用戶的當前坐標系統，即SVG的畫布。
如果我們要將上例中的
<div>
和
<rect>
都使用百分比來設置其
transform
原點到中心，代碼如下：
<!DOCTYPE html>
<style>
div, rect {
transform-origin: 50% 50%;
}
</style>
?
得到的結果如下圖所示：
必須指出的是，到寫這篇文章為止，Firefox瀏覽器仍不支持使用百分比來設置
transform
的原點，這是一個總所周知的
bug
。因此，目前最好還是使用絕對值來設置
transform
的原點。你仍可以在webkit內核的瀏覽器中使用百分比來設置原點。
下面是一個SVG風車的小例子，我們使用CSS animation來使它不停的旋轉。為了使風車繞指定的原點旋轉，我們同時使用像素和百分比來設置它的
transform
原點。
<svg>
<style>
.wheel {
transform-origin: 193px 164px;
-webkit-transform-origin: 50% 50%;
-webkit-animation: rotate 4s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
animation: rotate 4s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
}
@-webkit-keyframes rotate {
50% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate {
50% {
transform: rotate(360deg);
}
}
</style>
<!-- SVG content -->
</svg>
?
?
注意，到目前為止，在使用SVG元素的時候，CSS 3D transformations是沒有硬件加速的，只是在SVG
transform
屬性上做了一些優化。但是，Firefox 瀏覽器對SVG的transforms有一定的加速效果。
?
SVG路徑動畫
我們沒有辦法使用CSS將一個SVG圖像轉換為另外一個圖形。如果你想制作路徑變形動畫，那么你需要使用javascript。我們建議使用Dmitry Baranovskiy寫的 Snap.svg 。
使用Snap.svg可以很容易的處理一寫怪異的問題。
你可以使用CSS來創建動態的畫線效果，這個效果你需要知道畫線路徑的總長度，然后使用SVG的
stroke-dashoffset
和
stroke-dasharray
屬性來制作畫線效果，如果你知道畫線路徑的總長度，可以使用下面的CSS代碼來制作這個動畫效果：
#path {
stroke-dasharray: pathLength;
stroke-dashoffset: pathLength;
/* transition stroke-dashoffset */
transition: stroke-dashoffset 2s linear;
}
svg:hover #path{
stroke-dashoffset: 0;
}
?
上面的代碼中，當鼠標滑過SVG元素時，路徑會向前繪制2秒鐘。
在下面的這個例子中，我們使用相同的技術-一個帶延遲的CSS transition來制作一個電燈泡通電的效果。
#cable {
stroke: #FFF2B1;
stroke-dasharray: 4000 4000;
stroke-dashoffset: 4000;
stroke-width: 4;
transition: stroke-dashoffset 8s linear;
}
svg:hover #cable {
stroke-dashoffset: 0;
}
/* turn lamp on */
.inner-lamp{
fill:grey;
transition: fill .5s ease-in 6s;
}
svg:hover .inner-lamp {
fill: #FBFFF8;
}
/* … */
?
?
如果兩條線和間隙的值都相等的話，你也可以使用
stroke-dasharray: 4000;
來替換
stroke-dasharray: 4000 4000
。
有些時候你不知道動畫路徑的總長度，這時，你可以使用javascript的
getTotalLength()
方法來獲取路徑的長度。
var path = document.querySelector('.drawing-path');
path.getTotalLength();
//set CSS properties up
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
//set transition up
path.style.transition = 'stroke-dashoffset 2s ease-in-out';
// animate
path.style.strokeDashoffset = '0';
?
上面的代碼說明我們可以使用javascript來完成和CSS同樣的事情。
?
出處： http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201503141522.html
下載： 201503142148
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
