html5+d3 svg 线条、图形颜色渐变动画

最新推荐文章于 2024-05-15 09:03:33 发布

逯加

最新推荐文章于 2024-05-15 09:03:33 发布

阅读量8.4k

点赞数 1

分类专栏： svg 文章标签： html5 svg 动画

本文链接：https://blog.csdn.net/tuoxinquyu/article/details/50461441

版权

svg 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>线条、图形颜色渐变动画</title>
<script src="js/jquery.min.js"></script>
<script src="js/d3.js"></script>


<script>
    $(document).ready(function(){
        changeCorlor();
    });

    function changeCorlor(){//控制circle颜色渐变属性
        var svg = d3.select("body").select("svg");
        //svg.select('#g1').attr("stop-color","yellow");

        svg.select('#svg_4').append("animate").attr("attributeName","fill")//因为是填充色，所以用fill属性；如果渐变的是线条的颜色，就改成stroke属性
            .attr('attributeType','XML')
            .attr('from','green')
            .attr('to','red')
            .attr('dur','1s')
            .attr('fill','freeze');
    }

    function changeColor2(){
        //利用d3.js获取svg元素
        var svg = d3.select("body").select("svg");
        //svg.select('#g1').attr("stop-color","yellow");
        //svg.select('#svg_4').remove("animate");
        var animate = svg.select('#svg_4').append("animate");
            animate.attr("attributeName","fill")
            .attr('attributeType','XML')
            .attr('from','green')
            .attr('to','yellow')
            .attr('dur','5s')   //秒数太小时看不出渐变的效果，不知道啥原因？？？而且渐变就第一次点击有效果，不知道为啥？？？
            .attr('fill','freeze');
    }
</script>
</head>

<body>
<input type="button" value="changeColor" onClick="changeColor2()">
<svg width="1920" height="5612" xmlns="http://www.w3.org/2000/svg">

 <defs>

  <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="lsvg_1">
    <stop id="g1" offset="0%" stop-color="green">
        <animate attributeName="stop-color" values="green; yellow;" dur="1s"  fill="freeze"/>
    </stop>
     <stop id="g1" offset="90%" stop-color="green">
        <animate attributeName="stop-color" values="green; yellow;" dur="1s"  fill="freeze"/>
    </stop>
    <stop id="g2" offset="100%" stop-color="green"> 
        <animate attributeName="stop-color" values="yellow;" dur="1s" fill="freeze"/>
    </stop>
 </linearGradient>

</defs> 

 <g>
   <path id="svg_3" d="m100,102c0,0 60,49 80,46c20,-3 69,44 97,43c28,-1 117,-4 117,-4" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="url(#lsvg_1)" fill="none">
  </path>

    <!-- 线条颜色的渐变 -->
    <animate attributeName="stroke" attributeType="XML" from="purple" to="red" begin="0s" dur="3s" fill="freeze"></animate>
  </path>
 </g>

<circle id="svg_4" cx="110" cy="320" r="100" stroke="">
    <!-- 图形颜色渐变，这个效果同js中的效果是一样的 -->
    <!--
    <animate attributeName="fill" attributeType="XML" from="yellow" to="red" begin="0s" dur="3s" fill="freeze"></animate>
    -->
</circle>

<!-- 任意不规则的封闭图形，填充色、外线条颜色都可以渐变 -->
<path d="m260,257.87201c71.28699,0.961 168.74301,-7.69301 170.548,0c1.80399,7.69299 30.67999,146.16599 0.90201,146.16599c-29.77802,0 -162.42599,0.96201 -162.42599,0.96201c0,0 -9.02402,-147.12799 -9.02402,-147.12799z" stroke="lightgreen" id="svg_1" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="lightgreen">
    <animate attributeName="fill" attributeType="XML" from="lightgreen" to="red" begin="0s" dur="3s" fill="freeze"></animate>
    <animate attributeName="stroke" attributeType="XML" from="lightgreen" to="yellow" begin="0s" dur="3s" fill="freeze"></animate>
</path>

</svg>
</body>
</html>

逯加

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html5+d3 svg 线条、图形颜色渐变动画

代码如下：<!doctype html><html><head><meta charset="utf-8"><title>线条、图形颜色渐变动画</title><script src="js/jquery.min.js"></script><script src="js/d3.js"></script><script> $(document).ready(function(){
复制链接

扫一扫

专栏目录