jquery - 使用 Keith Wood 的 jQuery SVG 插件对外部加载的 SVG 进行动画处理

Question

我正在尝试使用 Keith Wood 的 plugin 对从外部 SVG 加载的一组路径的填充颜色进行动画处理。 .

首先，我将 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({svgFill: '蓝色'}, 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 进行动画处理？

Answer 1

我能够完成大约。同样的事情...两种不同的方式...在下面的代码顶部..你会看到简单的CSS悬停标签(至少对于简单的事情是有效的)....并且我也能够得到笔触和填充通过颜色等脉动，整个 9 码......但不是在 Firefox 3.6 中，呃。

坦白说，我什至无法让 jQuery SVG 1.4.3 将一个该死的 SVG 正确地放入 DOM 中。我不知道它到底出了什么问题。我发誓我已经做对了一切......所以我不知道下面的内容是否有帮助..但要记住一件事..您可能无法按原样使用它...似乎您必须包含 xmlns:xlink 命名空间链接并使用 xlink 转换...或者你可以把这些东西扔掉并通过 CSS 来完成...

浏览器兼容性的大杂烩:SVG 是一个集群，并且使得使用向量元素的开发变得如此困难，尽管它本来可以很酷!可惜每个人都没有 Safari 或 Chrome，对吧？

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG Tiny 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  baseProfile="tiny" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>     
    g #front {fill:white; fill-opacity:.9; stroke-dasharray:none; stroke-dashoffset:0}
    g:hover #front {fill: red; fill-opacity:.5; stroke-dasharray:30,20;}
    g #back {fill:white;fill-opacity:.8; stroke-dashoffset:0;}
    g:hover #back {stroke-dasharray:30,20; stroke-dashoffset:20; fill: grey; }
</style>
<g id="folderIcon" transform="translate(-15.1,-40.1)">
<g id="sides" transform="translate(-173,-364)">
<path d="m 198,406 0,9 -8,0 0,92 122,0 0,-92 -86,0 0,-9 -28,0 z" id="back" style="stroke:black;stroke-width:3.75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;" />
 <rect height="84.7" id="front" style="stroke:black; stroke-width:3.608; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:4; stroke-opacity:1;" transform="matrix(1,0,-0.397,0.918,0,0)" width="122" x="410" y="468" />
</g>
</g>
<animate xlink:href="#front"
    attributeName="fill" 
    attributeType="CSS"
    from="#ff0" to="#00f" dur="10s" fill="freeze" />
<animate xlink:href="#back"
    attributeName="stroke" 
    attributeType="CSS"
    from="#88ff88"
        to="#880088"
    dur="10s"
    fill="freeze" />
</svg>

PS:除了您在原始问题中发布的内容(我已经尝试过)之外，如果您还有任何提示来让内联或“链接”SVG 与那个法国人的 jQ 插件一起使用.. any help would be appreciated. ..