將嵌入式SVG動畫嵌入到CSS背景中

Question

我的目標是在現有的html頁面中懸停動畫，如時髦的漩渦（如1）。換句話說，我想在「懸停」某些元素時在自定義漩渦中應用路徑繪製動畫。 但我有一些限制：

1. 我可以編輯.css文件（該網站只允許.css文件提交用戶定製）。所以，我無法創建更多的html元素。我只有現有的合作伙伴。因此，我無法在html中插入svg。
2. 在html上沒有可用的svg元素。

經過幾天的想法和做一些研究工作，我已經得出結論，通過數據URI編碼將svg注入到css背景將是實現我的目標的方法。我是能夠實現如下的結果：

background-image:url("data:image/svg+xml;utf-8,[svg URI encoded]");

手柄：

1. 通過像這樣處理的靜態SVG等的CSS背景以類似的方式描述上面的動畫SVG，但沒有交互式控制，沒有我所期望的懸停效果。動畫只是從背景渲染開始。

2. 將整個item2放置在元素懸停中，我得到一個接近我的目標的結果，但有一個實際問題：懸停狀態不會啓動動畫，但會恢復它。每次發生懸停時，動畫都會從停止的地方繼續。這裏是表示這一特定問題的代碼：

.sample { 
 
    margin: 0; 
 
    border:1px solid black; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-repeat:no-repeat; 
 
} 
 
.sample:hover{ 
 
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 30' width='90' height='30'%3E%3Cstyle%3Ecircle{fill:%234c4d4e}%3C/style%3E%3Ccircle cx='15' cy='15' r='0'%3E%3Canimate attributeName='r' attributeType='XML' from='0' to='0' begin='0' dur='1.4s' values='0;10;0;0' keyTimes='0;0.2;0.7;1' calcMode='spline' keySplines='0.42 0 0.58 1;0.42 0 0.58 1;0 0 1 1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='45' cy='15' r='0'%3E%3Canimate attributeName='r' attributeType='XML' from='0' to='0' begin='0.3s' dur='1.4s' values='0;10;0;0' keyTimes='0;0.2;0.7;1' calcMode='spline' keySplines='0.42 0 0.58 1;0.42 0 0.58 1;0 0 1 1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='75' cy='15' r='0'%3E%3Canimate attributeName='r' attributeType='XML' from='0' to='0' begin='0.6s' dur='1.4s' values='0;10;0;0' keyTimes='0;0.2;0.7;1' calcMode='spline' keySplines='0.42 0 0.58 1;0.42 0 0.58 1;0 0 1 1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E"); 
 
}

<div class="sample"> 
 
    </div>

在此代碼施加的SVG只是一個隨機例子。無論如何，假設不可能控制svg中的動畫（我沒有成功嘗試通過SMIL使用像'begin = click或begin = mouseover'這樣的屬性來完成它，並且通過將CSS注入標籤中的svg，類似[id- [svg-path]：hover），我開始嘗試弄清楚如何重新開始渲染svg。有了這個，每當元素被徘徊，svg就會重新啓動，動畫將從真實的開始再次開始。 正如你所看到的，在這種情況下，我唯一需要解決的就是重新啓動懸停時的svg。也許SMIL中的某些屬性應該起作用？或在CSS中的詭計？ 我希望能得到一些關於這方面的幫助:)

Answer 1

我用javascript做了一個棘手的方法，每次鼠標結束時，svg將被添加一個隨機屬性。

像這樣：隨機=「$ {的Math.random（）}」

這將是更好的，如果通過利用UUID發生器產生隨機這個字符串中的每個時間。

$('.sample').mouseover(function() { 
 
    var data = `data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' random='${Math.random()}' viewBox='0 0 90 30' width='90' height='30'%3E%3Cstyle%3Ecircle{fill:%234c4d4e}%3C/style%3E%3Ccircle cx='15' cy='15' r='0'%3E%3Canimate attributeName='r' attributeType='XML' from='0' to='0' begin='0;sample.click' dur='1.4s' values='0;10;0;0' keyTimes='0;0.2;0.7;1' calcMode='spline' keySplines='0.42 0 0.58 1;0.42 0 0.58 1;0 0 1 1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='45' cy='15' r='0'%3E%3Canimate attributeName='r' attributeType='XML' from='0' to='0' begin='0.3s;sample.mouseover' fill='remove' dur='1.4s' values='0;10;0;0' keyTimes='0;0.2;0.7;1' calcMode='spline' keySplines='0.42 0 0.58 1;0.42 0 0.58 1;0 0 1 1' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='75' cy='15' r='0'%3E%3Canimate attributeName='r' attributeType='XML' from='0' to='0' begin='0.6s;sample.mouseover' fill='remove' dur='1.4s' values='0;10;0;0' keyTimes='0;0.2;0.7;1' calcMode='spline' keySplines='0.42 0 0.58 1;0.42 0 0.58 1;0 0 1 1' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E`; 
 
    $(this).css('background-image', 'url("' + data + '")'); 
 
}); 
 
$('.sample').mouseout(function() { 
 
    $(this).css('background-image', 'none'); 
 
});

.sample { 
 
    margin: 0; 
 
    border:1px solid black; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-repeat:no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="sample" id="sample"></div>