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：'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制作动画？

Answer 1

我能够完成约。同样的事情......两种不同的方式......在下面的代码的顶部..你会看到简单的CSS悬停标签（这是有效的，至少对于简单的事情而言）....而且我也能够得到整个9码的冲程和填充颜色等，整个9码...但不是在火狐3.6，呃。

坦率地说，我甚至无法让jQuery SVG 1.4.3正确地将一个疯狂的SVG放入DOM中。我不知道它到底有什么问题......我发誓我已经做好了一切......所以我不知道如果以下有帮助......但有一点需要记住..你可能无法使用它...看起来你要么必须包含xmlns：xlink命名空间链接并使用xlink转换...或者你可以吹掉那些东西，只是通过CSS来做...

浏览器兼容性的大杂烩re：SVG是一个集群-f ** k，并且正在开发w / vector元素这么难，即使它可以很酷！太糟糕了，每个人都没有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.。

Answer 2

您绝对可以为加载的SVG的元素或组的填充颜色设置动画。在示例中，“blue.svg”是单个矩形。

陷阱：

您必须使用FF4 +或Chrome，我还没有尝试使用Opera或Safari。
并非所有动画都支持群组，而AFAIK并非全部支持 Keith Wood在FF中的jquery扩展工作中的动画。一些动画可以用css完成。
它的“rect2816”不是“svgblue”或“svgbox”，因为它是单独的矩形你要动画的元素，而不是整个svg。
在处理元素及其所在的div时，不要忘记使用CSS选择器＃“＃rect2816”“＃svgbox”
使用jquery svg扩展名时，“svgFill”不是“填充”
使用Inkscape创建SVG

加载这些库：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.svg.js"></script>
<script type="text/javascript" src="js/jquery.svganim.js" ></script>

加载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);
   });
}

注意 - 在我的方框中，重复的鼠标悬停动画不会花费指定的2秒，所以我可能在鼠标悬停时做错了。

Answer 3

从我所看到的情况来看，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" );

* - 矛

使用Keith Wood的jQuery SVG插件动画外部加载的SVG

3 个答案: