将嵌入式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>