国产午夜精品一区二区三区嫩草,996热精品视频在线观看,欧美一级裸体视频

SVG元素可以像HTML元素一樣，使用CSS keyframes和animation屬性或者CSS transitions來制作各種動畫效果。

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度，我們將會得到下圖的效果（圖中的小圓點是它們各種的原點）。

如何使用CSS來修改SVG原點和制作SVG動畫

如果我們想根據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>

得到的結果如下圖所示：

如何使用CSS來修改SVG原點和制作SVG動畫

必須指出的是，到寫這篇文章為止，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>

DEMO

注意，到目前為止，在使用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;
}
/* … */

DEMO

如果兩條線和間隙的值都相等的話，你也可以使用 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

本文：如何使用CSS來修改SVG原點和制作SVG動畫

下載： 201503142148

如何使用CSS來修改SVG原點和制作SVG動畫

更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號聯系： 360901061

您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對您有幫助就好】元

2元

5元

10元

20元

自定義