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

发布于 2024-10-24 00:04:09 字数 1168 浏览 1 评论 0原文

我正在尝试使用 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: '蓝色'}, 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 进行动画处理？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不再见 2024-10-31 00:04:09

我能够完成大约。同样的事情...两种不同的方式...在下面的代码顶部..你会看到简单的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 插件一起使用.. 任何帮助将不胜感激。..

I was able to accomplish approx. the same thing... TWO different ways... at the top of the code below.. you'll see simple CSS hover tags (that works, at least for simple things).... and I was ALSO able to get the strokes and fills pulsating through colors, etc, the whole 9 yards... but not in firefox 3.6, ugh.

Frankly, I can't even get jQuery SVG 1.4.3 to put a freaking SVG into the DOM correctly.. I dunno what the heck is wrong with it.. I swear I've done everything right.... SO I dunno if the below helps.. but one thing to keep in mind.. you may not be able to use this as is... it seems like you either have to include the xmlns:xlink namespace link and use the xlink transformations... OR you can blow that stuff away and just do it via CSS...

The hodge-podge of browser compatibility re: SVG is a cluster-f**k, and is making development w/ vector elements so hard, even though it COULD be so cool!! Too bad everyone doesn't have Safari or Chrome, right?

<?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: If you have any tips besides what you had posted in your original question (which I've tried) to get the inline OR "linked" SVG's working with that French guy's jQ plugin.. any help would be appreciated...

回复收藏 0 原文

毅然前行 2024-10-31 00:04:09

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

陷阱：

您必须使用 FF4+ 或 Chrome，我还没有尝试过 Opera 或 Safari。
并非所有动画都支持组，据我所知并非所有
Keith Wood 在 FF 中的 jquery 扩展工作中的动画。一些
动画可以用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 秒，所以我可能做错了什么鼠标悬停。

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.

回复收藏 0 原文

心安伴我暖 2024-10-31 00:04:09

据我所见， svgFill 动画对“fill”属性进行动画处理。一个小测试表明 CSS 'fill' 属性总是覆盖 SVG 'fill' 属性的值。我想这是有意的行为。

我可以更改组或单个路径的填充颜色，如下所示：
<块引用>
svg.style('#group1 {fill: black}');
现在，当我尝试像这样设置路径动画时：
<块引用>
$('路径').animate({svgFill: '蓝色'}, 500);

您正在 css 中设置初始值，并尝试为该属性设置动画。正如您所发现的，它不起作用。至少在我的火狐浏览器中不是这样。

一种解决方案是不为属性设置动画，而是为 css fill 属性设置动画。为了对颜色进行动画处理，您需要 jquery-color： https://github.com/jquery/jquery -color

为了能够对 css fill 属性进行动画处理，您需要将其挂接到：

jQuery.Color.hook( "fill" );

*-pike

From what I'm seeing, the svgFill animation animates the 'fill' attribute. A little test shows that the CSS 'fill' property always overrides the value of the SVG 'fill' attribute. I suppose that is intended behaviour.

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

Youre setting the initial value in the css, and trying to animate the attribute. As you found out, it doesnt work. At least not in my firefox.

One solution is, to not animate the attribute, but animate the css fill property. In order to animate colors you'll need jquery-color: https://github.com/jquery/jquery-color

To be able to animate the css fill property, you'll need to hook that in :