我正在尝试使用 Keith Wood 为从外部 SVG 加载的一组路径的填充颜色设置动画plugin http://keith-wood.name/svg.html.
首先,我将 SVG 导入到 div 容器中:
$(document).ready(function() {
$('#header-main').svg({loadURL: 'header.svg'});
var svg = $('#header-main').svg('get');
});
SVG 文件如下所示:
<svg>
<g id="group1">
<path d="M0,22.943V0.223h1.413v22.721H0z"/>
<path etc../>
</g>
</svg>
我可以更改组或单个路径的填充颜色,如下所示:
svg.style('#group1 {fill: black}');
现在,当我尝试像这样设置路径动画时:
$('path').animate({svgFill: 'blue'}, 500);
或 $('#group1').animate({svg Fill: 'blue'}, 500);
或者使用任何其他选择器,例如路径的 id,什么也不会发生。
但如果我要创建一条路径,并像这样设置动画:
var path1 = svg.createPath();
svg.path(path1.move(50, 90).curveC(0, 90, 0, 30, 50, 30).
line(150, 30).curveC(200, 30, 200, 90, 150, 90).close(),
{fill: 'none', stroke: '#D90000', strokeWidth: 10});
$('path').animate({svgFill: 'blue'}, 500);
我创建的路径具有动画效果,但从 header.svg 文件导入的其他路径不执行任何操作。
我在这里做错了什么,还是该插件无法对外部 svg 进行动画处理?