7007.svg用法-CSDN博客

本文链接：https://blog.csdn.net/xiongjia516/article/details/113971729

文章目录

1 svg 相关知识点

1 svg 相关知识点

1.1 参考原文网页链接

https://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/

https://www.cnblogs.com/fanlinqiang/p/11826143.html

1.2 摘录部分知识点

在这里插入图片描述

1.3 js控制svg变化参考他人的代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>使用js控制svg的示例</title>
    <script type="text/javascript" src="jquery.min.js">  </script>
</head>
<body>
    <script type="text/javascript"  defer="true" > 
        function member(id, color) {
                this.id = id;
                this.color = color;
            }
            var big_table = new Array();
            big_table[0] = new member("aaa0","#FF0000"); //svg的元素的id
            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');
                    console.log("map:", map);
                    var svg_document = map.contentDocument;

                    console.log("svg_document:", svg_document);
                    

                    if (svg_document == null) {
                    alert("重写加载");
                    time = setTimeout("Inital()", 300);  
                    } else {
                    clearTimeout(time);
                    }

                    for (var iii in big_table) {
                        obj = big_table[iii].id;
                        console.log("obj:", obj);
                        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> -->
    <embed id="map" width="800px" height="600px" type="image/svg+xml" src="1.svg" />
    </div>
   
</body>

</html>

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="#00FFFF" id="aaa0"/> 
<circle cx="200" cy="100" r="40" fill="#00FF00" id="aaa1"/> 

<circle cx="100" cy="200" r="40" fill="#FF00FF" id="aaa2"/> 
<circle cx="200" cy="200" r="40" fill="#ff0000" id="aaa3"/> 
</svg>