如何在SVG中使用動畫製作圖像（使用CSS？）

我有一個帶有圖像的svg，我想知道是否可以使用CSS製作動畫？如何在SVG中使用動畫製作圖像（使用CSS？）

我已經把它轉變成了一個懸浮的狀態，但是它跳躍了一點，這是一個奇怪的效果，但後來我想我可能會有可能讓它看起來更自然，如果它是動畫的，比如這是我在CSS3動畫中看到的反彈效果。

任何人都可以從svg（文本字符中的png）中獲得任何想法嗎？

它在我的網站上看起來比它在這個JSFiddle更好看，其中由於某種原因它有點模糊。

SVG代碼：

<svg width="50px" height="50px" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" style="width: 50px;height: 50px;"> 
    <defs> 
     <pattern id="img1" patternUnits="userSpaceOnUse" width="118" height="108"><image xlink:href="https://31.media.tumblr.com/9766ee4952b593bbc1af5e2d2249c858/tumblr_inline_mxnnn7dXwh1s16nrs.jpg" x="0" y="0" width="50" height="50"></image> 
     </pattern> 
    </defs> 
<text x="0" y="0" font-size="59" fill="url(#img1)"> 
     <tspan x="-1" y="49">▼</tspan> 
    </text> 

</svg>

沒有 JS或框架PLZ

UPDATE所以我找到了SVG的標籤，但我不能夠旋轉圖像或將其招（即我？）沒有移動整個對象（即三角形，這不是我後面的...）

小提琴現在動畫不透明（雖然不是很好，從來沒有達到完全不透明）

更新2 Randak說，在它看起來在我的網站模糊的評論，我在最新的穩定瀏覽器（Chrome操作系統）和它看起來不錯，在小型和大型... enter image description here

來源

2013-12-13 Louis Maddox

不完全看到跳躍。你想要它做什麼？目前還不清楚你想要什麼樣的動畫。 – randak

如果您從小提琴中刪除屬性，您會明白我的意思。 –

任何光滑的動畫都會很酷。也許如果圖像是隨着反射效果或其他東西移動的，那就是如果圖像可以單獨進行動畫 –

可能您看到的「跳躍」在縮放時捕捉到不同的字體大小。你可以使用text-rendering: geometricPrecision來消除這種情況。但是，如果您的形狀只是一個三角形，爲什麼不使用<path>元素呢？這通常會更好，並且會始終平穩過渡。

下面是一個使用路徑元件具有圖案的例子：http://jsfiddle.net/N7njg/（不幸的是，似乎鉻具有動畫的圖案的x屬性的一個錯誤）。

來源

2013-12-13 09:58:08

這是我的第一個計劃，忘記了這一點。無法在[SVG-edit]（http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html）中創建路徑，儘管試圖用其他方式嘗試。跳躍與文本字符內部的圖像比例有關（它實際上很好地轉換了） –

實際上已經想出瞭如何獲得路徑和svg代碼 - 看起來好多了！ –

我猜我現在需要以某種方式使用clipPath ... http://jsfiddle.net/n7Wy6/4/ –

如何在SVG中使用動畫製作圖像（使用CSS？）

回答

相關問題