使用Keith Wood为外部加载的SVG设置动画';s jQuerySVG插件
我正在尝试使用Keith Wood的动画制作从外部SVG加载的一组路径的填充颜色 首先,我将SVG导入一个div容器:使用Keith Wood为外部加载的SVG设置动画';s jQuerySVG插件,jquery,svg,jquery-animate,Jquery,Svg,Jquery Animate,我正在尝试使用Keith Wood的动画制作从外部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,
$(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>
$('path').animate({svgFill: 'blue'}, 500);
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);
现在,当我尝试像这样设置路径动画时:
<svg>
<g id="group1">
<path d="M0,22.943V0.223h1.413v22.721H0z"/>
<path etc../>
</g>
</svg>
$('path').animate({svgFill: 'blue'}, 500);
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);
或
$(#group1')。动画({svgFill:'blue'},500)
或者使用任何其他选择器,例如路径的id,都不会发生任何事情。
但如果我要创建一条路径,并像这样设置它的动画:
<svg>
<g id="group1">
<path d="M0,22.943V0.223h1.413v22.721H0z"/>
<path etc../>
</g>
</svg>
$('path').animate({svgFill: 'blue'}, 500);
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制作动画?我能够完成大致相同的事情。。。两种不同的方式。。。在下面代码的顶部。。您将看到简单的CSS悬停标记(至少对于简单的事情是有效的)。。。。我还能够通过颜色等让笔触和填充跳动,整个9码。。。但不是在Firefox3.6中,呃 坦率地说,我甚至不能让jQuerySVG1.4.3将一个奇怪的SVG正确地放入DOM中。。我不知道这到底是怎么回事。。我发誓我做的一切都是对的。。。。所以我不知道下面的内容是否有用。。但有一件事要记住。。您可能无法按原样使用此。。。看起来您要么必须包含xmlns:xlink名称空间链接,要么使用xlink转换。。。或者你可以把这些东西吹走,然后通过CSS来做 浏览器兼容性的hodge podge re:SVG是一个cluster-f**k,它使得使用矢量元素进行开发变得非常困难,尽管它可能非常酷!!可惜每个人都没有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>
g#前{填充:白色;填充不透明度:.9;笔划dasharray:无;笔划dashoffset:0}
g:hover#front{填充:红色;填充不透明度:.5;笔划数组:30,20;}
g#背面{填充:白色;填充不透明度:.8;笔划dashoffset:0;}
g:hover#back{stroke-dasharray:30,20;stroke-dashoffset:20;fill:grey;}
..您完全可以设置加载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>
用于设置矩形动画的代码,显示两种更改填充的方法:
function main(){
$('#svgblue').mouseover(function(){
$('#rect2816').animate({ svgFill: red },2000);
});
$('#svgblue').mouseout(function(){
$('#rect2816').css("fill", blue);
});
}
注意-在我的框中,重复的鼠标悬停动画不会占用指定的2秒钟,因此我可能是鼠标悬停有问题。据我所见,svgFill动画会为“填充”属性设置动画。一个小测试表明CSS“fill”属性总是覆盖SVG“fill”属性的值。我想这是故意的行为
我可以更改组或单个路径的填充颜色,如下所示:
svg.style('#group1 {fill: black}');
style('#group1{fill:black}')
现在,当我尝试像这样设置路径动画时:
<svg>
<g id="group1">
<path d="M0,22.943V0.223h1.413v22.721H0z"/>
<path etc../>
</g>
</svg>
$('path').animate({svgFill: 'blue'}, 500);
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);
$('path').animate({svgFill:'blue'},500)
您正在css中设置初始值,并尝试设置属性的动画。正如你发现的,它不起作用。至少在我的firefox中没有
一种解决方案是,不设置属性的动画,而是设置css填充属性的动画。要设置颜色动画,您需要jquery颜色:
要能够设置css fill属性的动画,您需要将其挂接到:
jQuery.Color.hook( "fill" );
*-梭子鱼