标签：脚本 控制 style SVG stroke getPropertyValue var evt fill

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。