使用Keith Wood的jQuery SVG插件对外部加载的SVG进行动画处理 [英] Animating externally loaded SVG with Keith Wood's jQuery SVG plugin

问题描述

我正在尝试使用Keith Wood的插件.

首先，我将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进行动画处理?

解决方案

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

陷阱:

• 您必须使用FF4 +或Chrome浏览器，但我还没有尝试过Opera或Safari.
• 并非所有动画均受组支持，并且AFAIK并非全部 Keith Wood的jquery扩展中的动画在FF中工作.一些 动画可以使用CSS完成.
• 它的"rect2816"不是"svgblue"或"svgbox"，因为它是单个矩形 您要设置动画的元素，而不是整个svg.
• 在处理元素及其所在的div时，请不要忘记CSS选择器#是必需的.#rect2816""#svgbox"
• 使用jQuery svg扩展名时，其"svgFill"不是"fill"
• 使用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秒钟内完成，因此，鼠标悬停可能有误.

I'm trying to animate the fill color of a group of path's loaded from an external SVG using Keith Wood's plugin.

First I import the SVG into a div container:

$(document).ready(function() {
$('#header-main').svg({loadURL: 'header.svg'});
var svg = $('#header-main').svg('get');

});

The SVG file looks like this:

<svg>
  <g id="group1">
    <path d="M0,22.943V0.223h1.413v22.721H0z"/>
    <path etc../>
  </g>
</svg>

I can change the fill color of the group or individual paths like so:

svg.style('#group1 {fill: black}');

Now when I try to animate the paths like this:

$('path').animate({svgFill: 'blue'}, 500);

or $('#group1').animate({svgFill: 'blue'}, 500);

or with any other selector, for instance the id of a path, nothing happens. But if I were to create a path, and animate it like this:

    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);

the path I created animates, but the other paths that were imported from header.svg file do nothing.

Am I doing something wrong here, or is the plugin just not capable of animating external svg?

解决方案

You absolutely can animate fill color of the elements or groups of loaded SVGs. In the example "blue.svg" is a single rectangle.

Gotchas:

• You must use FF4+ or Chrome and I haven't tried Opera or Safari.
• Not all animations are supported on groups, and AFAIK not all animations in Keith Wood's jquery extension work in FF. Some animations can be done with css.
• Its "rect2816" not "svgblue" or "svgbox" because its the individual rectangle element you are animating, not the entire svg.
• Don't forget the CSS selector # is required when addressing the elements and the div they are in... "#rect2816" "#svgbox"
• Its "svgFill" not "fill" when using the jquery svg extension
• Use Inkscape to create SVGs

Load these libraries:

<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>

Load the SVG:

$(document).ready(function(){
  getsvg();  
})
function getsvg(){
  $("#svgbox").svg({  
    loadURL: 'blue.svg',  
    onLoad: main,  
    settings: {}  
  } );
}

Code to animate the rectangle, showing two ways to change fill:

function main(){

$('#svgblue').mouseover(function(){
    $('#rect2816').animate({ svgFill: red },2000);
});
   $('#svgblue').mouseout(function(){
$('#rect2816').css("fill", blue);
   });
}

Note- on my box the repeated mouseover animation does not take the specified 2 seconds, so I may be doing something wrong with the mouseover.

这篇关于使用Keith Wood的jQuery SVG插件对外部加载的SVG进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！