使用脚本控制SVG

1、脚本控制

<svg width="350px" height="200px" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>Accessing Content in SVG</title>
    <rect id="rectangle" x="10" y="20" width="30" height="40" style="stroke:gray;fill:#ff9;stroke-width:3"/>
    <text id="output" x="10" y="80" style="font-size:9pt"/>
    <script>
        var txt = document.getElementById("output");
        var r = document.getElementById("rectangle");
        var msg = r.getAttribute("x")+","+
            r.getAttribute("y")+","+
            r.style.getPropertyValue("stroke")+","+
            r.style.getPropertyValue("fill");
        r.setAttribute("height",30);
        txt.textContent = msg;
    </script>
</svg>

2、处理鼠标事件

<svg width="350px" height="200px" viewBox="0 0 350 200" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <circle id="circle" cx="50" cy="50" r="20" style="fill:#ff9;stroke:black;stroke-width:1"/>
    <script>
        function grow(evt){
            var obj = evt.target;
            obj.setAttribute("r","30")
        }
        function shrink(evt){
            this.setAttribute("r","20")
        }
        function reStroke(evt){
            var w = evt.target.style.getPropertyValue("stroke-width");
            w = 4 - parseFloat(w)
            evt.target.style.setProperty("stroke-width",w,null);
        }
        var c = document.getElementById("circle");
        c.addEventListener("mouseover",grow);
        c.addEventListener("mouseout",shrink);
        c.addEventListener("click",reStroke);
    </script>
</svg>

3、事件响应

<svg width="350px" height="500px" viewBox="0 0 350 500" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     onl oad="init(evt)"
>

    <defs>
        <style type="text/css">
            svg {
                stroke:black;
                fill:white;
            }
            g.selected rect {
                fill:#ffc
            }
            text {
                stroke:none;
                fill:black;
                text-anchor:middle;
            }
        </style>
        <script><![CDATA[
            var scaleChoice = 1;
            var scaleFactor = [1.25,1.5,1.75];
            function init(evt){
                var obj;
                for(var i=0;i<3;i++){
                    obj = document.getElementById("scale"+i);
                    obj.addEventListener("click",clickButton,false);
                }
                transformShirt();
            }
            function clickButton(evt){
                var choice = evt.target.parentNode;
                var name = choice.getAttribute("id");
                var old = document.getElementById("scale"+scaleChoice);
                old.removeAttribute("class");
                choice.setAttribute("class","selected");
                scaleChoice = parseInt(name[name.length-1]);
                transformShirt();
            }
            function transformShirt(){
                var factor = scaleFactor[scaleChoice];
                var obj = document.getElementById("shirt");
                obj.setAttribute("transform","translate(150,150)"+"scale(" + factor + ")");
                obj.setAttribute("stroke-width",1/factor);
            }
        ]]></script>
        <path id="shirt-outline" d="M -6 -30 -32 -19 -25.5 -13 -22 -14 -22 30 23 30 23 -14 26.5 -13 33 -19 7 -30
A 6.5 6 0 0 1 -6 -30"/>
    </defs>
    <g id="shirt">
        <use xlink:href="#shirt-outline" x="0" y="0"/>
    </g>
    <g id="scale0">
        <rect x="100" y="10" width="30" height="30"/>
        <text x="115" y="30">S</text>
    </g>
    <g id="scale1">
        <rect x="140" y="10" width="30" height="30"/>
        <text x="155" y="30">M</text>
    </g>
    <g id="scale2">
        <rect x="180" y="10" width="30" height="30"/>
        <text x="195" y="30">L</text>
    </g>
</svg>

标签：脚本,控制,style,SVG,stroke,getPropertyValue,var,evt,fill
来源： https://www.cnblogs.com/xl4ng/p/15866344.html