使用 vivus.js 填充不适用于 SVG
Fill not applying to SVG using vivus.js
大家好,我有以下使用 vivus.js SEE HERE 绘制的 SVG 动画,svg 如下:
<style type="text/css">
.st0 {
fill: transparent;
stroke: #020000;
stroke-miterlimit: 10;
}
</style>
<path id="XMLID_3_" class="st0" d="M-0.5,3.5H19c0,0,1.5-0.1,1.5,1.6V77c0,0,1,1.1,2,0V4c0,0,0-1.5,1.4-1.3l20.4,0c0,0,8,0.1,12,8.7
S54.9,31.6,42,32.9l0.1,2.8c0,0,20.8,0.5,20.1,19.8c0,0-0.1,16.5-19.6,19.5v3c0,0,14.5-0.3,19-10.4c0,0,13-22.6-10-32.9V34
c0,0,9.8-5.3,9.1-15.6c0,0,0.5-8.8-7.4-15l8.1-0.1l0.4,38L62,75.9c0,0,1.6,1.2,3.2-0.1s0-73.3,0-73.3h22.3V76c0,0,3.1,2.1,4.3-0.1
s0-73.4,0-73.4H104c0,0,9.5,1.8,9.5,11.1V76c0,0,1.6,2.1,3.5,0s0-66.1,0-66.1s-2.5-9.4-16-9.4H-0.5V3.5z" />
我正在使用以下 JS 为 svg 设置动画:
new Vivus('svglogo', {duration: 200} , function() {
$('#svglogo st0').attr({'fill' : '#020000'})
});
绘图完成后,我想将填充添加到徽标中,因此我在回调函数中有以下内容:
$('#svglogo st0').attr({'fill' : '#020000'})
但这似乎真的行不通,有人能告诉我我做错了什么吗?为什么填充不适用?我真的很想在绘图动画完成后应用填充。
CSS 样式设置的填充 属性 会否决填充属性。你应该使用
$('#svglogo st0').css({'fill' : '#020000'})
大家好,我有以下使用 vivus.js SEE HERE 绘制的 SVG 动画,svg 如下:
<style type="text/css">
.st0 {
fill: transparent;
stroke: #020000;
stroke-miterlimit: 10;
}
</style>
<path id="XMLID_3_" class="st0" d="M-0.5,3.5H19c0,0,1.5-0.1,1.5,1.6V77c0,0,1,1.1,2,0V4c0,0,0-1.5,1.4-1.3l20.4,0c0,0,8,0.1,12,8.7
S54.9,31.6,42,32.9l0.1,2.8c0,0,20.8,0.5,20.1,19.8c0,0-0.1,16.5-19.6,19.5v3c0,0,14.5-0.3,19-10.4c0,0,13-22.6-10-32.9V34
c0,0,9.8-5.3,9.1-15.6c0,0,0.5-8.8-7.4-15l8.1-0.1l0.4,38L62,75.9c0,0,1.6,1.2,3.2-0.1s0-73.3,0-73.3h22.3V76c0,0,3.1,2.1,4.3-0.1
s0-73.4,0-73.4H104c0,0,9.5,1.8,9.5,11.1V76c0,0,1.6,2.1,3.5,0s0-66.1,0-66.1s-2.5-9.4-16-9.4H-0.5V3.5z" />
我正在使用以下 JS 为 svg 设置动画:
new Vivus('svglogo', {duration: 200} , function() {
$('#svglogo st0').attr({'fill' : '#020000'})
});
绘图完成后,我想将填充添加到徽标中,因此我在回调函数中有以下内容:
$('#svglogo st0').attr({'fill' : '#020000'})
但这似乎真的行不通,有人能告诉我我做错了什么吗?为什么填充不适用?我真的很想在绘图动画完成后应用填充。
CSS 样式设置的填充 属性 会否决填充属性。你应该使用
$('#svglogo st0').css({'fill' : '#020000'})