D26-測試用d3 svg function 顯示圖示

第 12 屆 iThome 鐵人賽

DAY 1

自我挑戰組

霍普菜鳥的資訊工作雜記系列第 26 篇

12th鐵人賽

嫩嫩小菜菜

2020-09-27 20:02:05

632 瀏覽

分享至

<!DOCTYPE html>
<html lang="zh-tw">

<head>
    <title>Icons</title>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
   <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <!--script src="js/bootstrap.min.js"></script -->
    <script type="text/javascript" src="js/d3.v3.min.js"></script>
</head>

<body>
    <style>
            .colorgraph {
            height: 5px;
            border-top: 0;
            background: #c4e17f;
            border-radius: 5px;
            background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);
            background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4);}
    </style>

    
    <div class="container" id="svg">
    



    </div>
<script>
        var svg=d3.select("#svg").append("svg")
                .attr("width",window.innerWidth)
                .attr("height",window.innerHeight);
        var color = d3.scale.category20();

        d3.xml("img/icons.svg").mimeType("image/svg+xml").get(function (error, xml) {
            if (error) console.log(error);
            else {svg.append("defs").html(xml.documentElement.innerHTML);
             var defs = d3.select("defs")[0][0].children;     
             var box;  
             for (var i=0;i < defs.length;i++){
                box = defs[i].getBBox();
                svg.append("use").attr("xlink:href", "#"+defs[i].id)
                    .attr("x", 100 * (i % 6) )
                    .attr("y", 100 * Math.floor(i / 6 ))
                    .attr("transform","scale(1,1)")
                    .attr("fill", color(defs[i].id));
                svg.append("text")
                    .attr("x", 100 * (i % 6) )
                    .attr("y", 100 * Math.floor(i / 6 )+80)
                    .text(defs[i].id)
                    .attr("transform","scale(1,1)")
             }

            };          

        });

</script>


</body>

</html>