SVG的内部事件添加

SVG的内部事件添加：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Title</title>

</head>

<body>

    <div>

        <svg width="440px" height="240px" xmlns="http://www.w3.org/2000/svg">

    <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"></text>

    <!--

        SVG脚本控制

        获取元素：

        document.getElementById(idStr);

        document.getElementsByTagName(tagName);

        元素设置属性：

        element.getAttribute(attr);

        element.setAttribute(name,attr);

        element.removeAttribute(name);

        元素设置style：

        element.style.getPropertyValue(proName);

        element.style.setPropertyValue(proName,value,priority[null/important]);

        element.style.removeProperty(proName);

        一次性设置style属性：

        element.style.cssText,

        文本内容：

        element.textContent;

     -->

    <script type="application/ecmascript">

        //<![CDATA[

            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>

    </div>

    <div>

        <svg width="440px" height="240px" xmlns="http://www.w3.org/2000/svg">

    <circle id='circle' cx=50 cy=50 r=20 style="fill:#ff9;stroke:black;stroke-width:1" />

    <script type="application/ecmascript">

        //<![CDATA[

            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>

    </div>

    <div>

    <svg width="400px" height="250px" id='svg03' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://wwww.w3.org/1999/xlink" onload="init(evt)">

    <defs>

    <style type="text/css">

    <![CDATA[

    svg {

        stroke:black;

        fill:white;

    }

    g.selected rect {

        fill: #ffc;

    }

    text {

        stroke: none;

        fill: black;

        text-anchor: middle;

    }

    line.slider {

        stroke: gray;

        stroke-width: 2;

    }

    ]]>

    </style>

    <!-- 这样的事件在chrome中竟然无法使用断点来调试； -->

    <script type="application/ecmascript">

        <![CDATA[

            // 选中的序号

            var scaleChoice = 1;

            // 选中放大的比例

            var scaleFactor = [1.25,1.5,1.75];

            // 颜色滑块选择的序号，-1表示没有选择；

            var slideChoice = -1;

            var rgb = [100,100,100];

            // 初始化事件

            function init(evt){

                var obj;

                for(var i=0;i<3;i++){

                    obj = document.getElementById('scale'+i);

                    obj.addEventListener('click',clickButton,false);

                    obj = document.getElementById('sliderGroup'+i);

                    obj.addEventListener('mousedown',startColorDrag,false);

                    obj.addEventListener('mousemove',doColorDrag,false);

                    obj.addEventListener('mouseup',endColorDrag,false);

                }

                transformShirt();

                // 添加鼠标放开事件监控，这样在整个svg范围内鼠标放开都可以停止拖动；

                document.getElementById('eventCatcher').addEventListener('mouseup',endColorDrag,false);

            }

            // 开始颜色拖动

            function startColorDrag(evt){

                var sliderId = evt.target.parentNode.getAttribute('id');

                endColorDrag(evt);

                slideChoice = parseInt(sliderId[sliderId.length-1]);

            }

            // 结束颜色拖动

            function endColorDrag(evt){

                slideChoice = -1;

            }

            // 进行颜色拖动

            function doColorDrag(evt){

                var sliderId = evt.target.parentNode.getAttribute('id');

                chosen = parseInt(sliderId[sliderId.length -1 ]);

                if(slideChoice >=0 && slideChoice == chosen){

                    var obj = evt.target;

                    // 此处坐标的选择会有问题；当窗口不是最大化的时候，不能进行拖动了；

                    // 需要减去的是svg对象离浏览器顶端的距离；需要进行计算；

                    var s03 = document.getElementById('svg03');

                    console.log(s03.offsetTop);//这个始终是494

                    console.log(evt.clientY);// 这个开始是390多；

                    var pos = evt.clientY - 397;

                    console.log(pos);

                    if(pos <0){

                        pos = 0;

                    }

                    if(pos > 100){

                        pos = 100;

                    }

                    obj = document.getElementById('slide'+slideChoice);

                    obj.setAttribute('y1',pos);

                    obj.setAttribute('y2',pos);

                    rgb[slideChoice] = 100 -pos;

                    var colorStr = 'rgb('+rgb[0]+'%,'+rgb[1]+'%,'+rgb[2]+'%)';

                    console.log(colorStr);

                    obj = document.getElementById('shirt');

                    obj.style.setProperty('fill',colorStr,null);

                }

            }

            // 衣服型号按钮点击事件

            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-30A6.5,6,0,0,1-6-30" />

    </defs>

    <rect id="eventCatcher" x=0 y=0 width=400 height=300 style="fill:none" pointer-events="visible"/>

    <g id="sliderGroup0" transform="translate(230,10)">

        <rect x=-10 y=-5 width=40 height=110 />

        <rect x=5 y=0 width=10 height=100 style='fill:red' />

        <line id="slide0" class="slider" x1=0 y1=0 x2=20 y2=0 />

    </g>

    <g id="sliderGroup1" transform="translate(280,10)">

        <rect x=-10 y=-5 width=40 height=110 />

        <rect x=5 y=0 width=10 height=100 style='fill:green' />

        <line id="slide1" class="slider" x1=0 y1=0 x2=20 y2=0 />

    </g>

    <g id="sliderGroup2" transform="translate(330,10)">

        <rect x=-10 y=-5 width=40 height=110 />

        <rect x=5 y=0 width=10 height=100 style='fill:blue' />

        <line id="slide2" class="slider" x1=0 y1=0 x2=20 y2=0 />

    </g>

    <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" class='selected'>

        <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>

    </div>

</body>

</html>
巴特西

SVG的内部事件添加

最新文章

热门文章
