zoukankan      html  css  js  c++  java
  • 用javascript控制svg的图片颜色

    SVG:(1.svg)

    <?xml version="1.0" standalone="no"?> 
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" > 
    <circle cx="100" cy="100" r="40" fill="#FFFFFF" id="aaa0"/> 
    <circle cx="200" cy="100" r="40" fill="#FFFFFF" id="aaa1"/> 
    
    <circle cx="100" cy="200" r="40" fill="#FFFFFF" id="aaa2"/> 
    <circle cx="200" cy="200" r="40" fill="#FFFFFF" id="aaa3"/> 
    </svg> 

    HTML:(1.htm)

    <script type="text/javascript">
    function member(id, color) {
        this.id = id;
        this.color = color;
    }
    var big_table = new Array();
    big_table[0] = new member("aaa0","#FF0000");
    big_table[1] = new member("aaa1","#99FF00");
    big_table[2] = new member("aaa2","#0000FF");
    big_table[3] = new member("aaa3","#9900FF");
    
    function color_map_init() {
        var map = document.getElementById('map');
        var svg_document = map.contentDocument;
        for (var iii in big_table) {
            obj = big_table[iii].id;
            this_color = big_table[iii].color;
            this_obj = svg_document.getElementById(obj);
            this_obj.setAttribute("style", "fill:" + this_color);
        }
    }
    
    function color_map(iii,new_color) {
        var map = document.getElementById('map');
        var svg_document = map.contentDocument;
        //this_obj = svg_document.getElementById("a1");//objstr
        obj = big_table[iii];
        this_obj = svg_document.getElementById(obj.id);
        this_obj.setAttribute("style", "fill:" + new_color);
    }
    </script>
    <input type="button" value="初始化init" onclick="color_map_init();">
    <input type="button" value="按钮1" onclick="color_map(0,'#FFFF00');">
    <input type="button" value="按钮2" onclick="color_map(1,'#FFFF00');">
    <input type="button" value="按钮3" onclick="color_map(2,'#FFFF00');">
    <input type="button" value="按钮4" onclick="color_map(3,'#FFFF00');">
    
    <div style="position:absolute;left:0px; top:60px;border:solid 1px;">
    <object id="map" type="image/svg+xml" data="1.svg" width="800" height="700"></object>
    </div>
  • 相关阅读:
    ZOJ1450 BZOJ1136 BZOJ1137 HDU3932[最小圆覆盖]
    POJ 1755 Triathlon [半平面交 线性规划]
    POJ 3384 Feng Shui [半平面交]
    POJ 3525 Most Distant Point from the Sea [半平面交 二分]
    POJ 1279 Art Gallery [半平面交]
    POJ3335 POJ3130 POJ1474 [半平面交]
    POJ 3608 Bridge Across Islands [旋转卡壳]
    nginx访问量统计
    PV UV QPS 并发数
    PV、UV、IP之间的区别与联系
  • 原文地址:https://www.cnblogs.com/qq21270/p/3421491.html
Copyright © 2011-2022 走看看