作者：highcharts | 时间：2014-7-22 18:12:13 | [小  大] | 来源：jQuery插件 | 

阅读：16360 | 

  ： 0 |  收藏 jQuery，插件，svg，svgdom，svganim，动态，元素，属性，渐变，animate   [摘要]： 今天有一个群友在问一个jQuery.animate()针对svg元素失效的问题，我自己验证了一遍的确是无效。后来通过多方查阅相关资料得知jQuery.animate()方法默认情况下是针对html元素的而非svg元素。如果要对其svg元素起作用，我们需要引入jQuery针对svg编写的一款插件。 参考资料： 1、 2、 我们需要这样做： 1、下载jquery.svg.js插件 下载地址：https://github.co...

今天有一个群友在问一个jQuery.animate()针对svg元素失效的问题，我自己验证了一遍的确是无效。后来通过多方查阅相关资料得知jQuery.animate()方法默认情况下是针对html元素的而非svg元素。如果要对其svg元素起作用，我们需要引入jQuery针对svg编写的一款插件。

参考资料：

1、

2、

我们需要这样做：

1、下载jquery.svg.js插件

下载地址：https://github.com/kbwood/svg

2、创建一个html测试页面

html页面内的内容为：

<svg> <rect x="200" y="200"> </rect> </svg> <div> <svg x="0px" y="0px" viewbox="0 0 100 100" preserveaspectratio="none"> <circle fill-rule="evenodd" clip-rule="evenodd" fill="#FFC600" cx="50" cy="50" r="10"/> </svg> </div> <input type="button" value="动态变更颜色" />

这里我们简单滴设置几个svg元素。

3、解压下载的插件包将其相关的js文件引入这个html页面内

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script> <script type="text/javascript" src="js/jquery.svg.js"></script> <script type="text/javascript" src="js/jquery.svgdom.js"></script> <script type="text/javascript" src="js/jquery.svganim.js"></script>

4、编写相关的按钮方法

function ChangeColor() { $("#rect").animate({ svgWidth: 500,svgStroke:"red",svgFill:"black" }, 1000); $('#circle').animate({ svgR: 50 }, 1000); }

跑起页面点击按钮即可看到svg元素渐变产生效果。

效果图如下所示：

图1：引入jquery.svg.js插件尚未点击按钮前的效果

图2：点击按钮后的效果

总结：

1、针对svg元素的动态属性或者样式变更，均需要在属性名称前加上svg标示符方可。

jQuery，插件，svg，svgdom，svganim，动态，元素，属性，渐变，animate    本文为原创型文章转载请尊重他人劳动成果并注明出处：?927  可以扫描本站该博客文章的QR二维码进行访问