使用Keith Wood的jQuery SVG插件动画外部加载的SVG
我正在尝试使用Keith Wood的插件为从外部SVG加载的一组路径的填充颜色设置动画。
首先，我将SVG导入div容器：
$(document).ready(function() { $('#header-main').svg({loadURL: 'header.svg'}); var svg = $('#header-main').svg('get'); }）;
SVG文件如下所示：
我可以像这样更改组或单个路径的填充颜色：
svg.style('#group1 {fill: black}');
现在，当我尝试为这样的路径设置动画时：
$('path').animate({svgFill: 'blue'}, 500);
或$（’＃group1’）。animate（{svgFill：’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？
我能够完成约。 同样的事情……两种不同的方式…在下面的代码的顶部..你会看到简单的CSShover标签（这是有效的，至少对于简单的事情而言）….我也能够得到冲程和填充通过颜色等，整个9码…但不是在Firefox 3.6，呃。
坦率地说，我甚至无法让jQuery SVG 1.4.3正确地将一个疯狂的SVG放入DOM中。我不知道它到底有什么问题……我发誓我已经做好了一切……所以我不知道如果以下有帮助..但有一点要记住..你可能无法使用它…似乎你要么必须包含xmlns：xlink命名空间链接并使用xlink转换…或者你可以吹掉那些东西，然后通过CSS来做…
浏览器兼容性的大杂烩re：SVG是一个集群-f ** k，并且正在使用矢量元素开发这么难，即使它可以很酷！ 太糟糕了，每个人都没有Safari或Chrome，对吧？
PS：如果您有任何提示，除了您在原始问题中发布的内容（我已尝试过），以获取内联或“链接”SVG与该法国人的jQ插件一起工作.. 任何帮助将不胜感激。 ..
您绝对可以为加载的SVG的元素或组的填充颜色设置动画。 在示例中，“blue.svg”是单个矩形。
陷阱：
- 您必须使用FF4 +或Chrome，我还没有尝试过Opera或Safari。
- 并非所有动画都支持群组，AFAIK并非所有动画都在Keith Wood的jquery扩展中在FF中工作。 一些动画可以用css完成。
- 它的“rect2816”不是“svgblue”或“svgbox”，因为它是你动画的单个矩形元素，而不是整个svg。
- 不要忘记在选择元素和它们所处的div时需要CSS选择器＃“＃rect2816”“＃svgbox”
- 使用jquery svg扩展时，它的“svgFill”不是“填充”
- 使用Inkscape创建SVG
加载这些库：
加载SVG：
$(document).ready(function(){ getsvg(); }) function getsvg(){ $("#svgbox").svg({ loadURL: 'blue.svg', onLoad: main, settings: {} } ); }
用于设置矩形动画的代码，显示两种更改填充的方法：
function main(){ $('#svgblue').mouseover(function(){ $('#rect2816').animate({ svgFill: red },2000); }); $('#svgblue').mouseout(function(){ $('#rect2816').css("fill", blue); }); }
注意 – 在我的盒子上，重复的鼠标hover动画没有花费指定的2秒，所以我可能在鼠标hover时做错了。
从我所看到的情况来看，svgFill动画为“填充”属性设置了动画。 一个小测试表明CSS’fill’属性总是覆盖SVG’fill’属性的值。 我想这是预期的行为。
我可以像这样更改组或单个路径的填充颜色：
svg.style（’＃group1 {fill：black}’）;
现在，当我尝试为这样的路径设置动画时：
$（’path’）。animate（{svgFill：’blue’}，500）;
您在css中设置初始值，并尝试为该属性设置动画。 正如你发现的那样，它不起作用。 至少不在我的Firefox中。
一种解决方案是，不为属性设置动画，但为css fill属性设置动画。 为了动画颜色，你需要jquery-color： https ： //github.com/jquery/jquery-color
为了能够为css fill属性设置动画，你需要将其挂钩：
jQuery.Color.hook( "fill" );
* -pike