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的内部事件添加的更多相关文章

  1. [转]用CSS给SVG <use>的内容添加样式

    来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...

  2. Canvas 内部元素添加事件处理

    目录 前言 自定义事件 有序数组 元素父类 事件判断 其他 立即执行函数 apply, call, bind addEventListener 传参 调用父类的构造函数 对象检测 isPointInP ...

  3. 【HTML5】Canvas 内部元素添加事件处理

    前言 canvas 没有提供为其内部元素添加事件监听的方法,因此如果要使 canvas 内的元素能够响应事件,需要自己动手实现.实现方法也很简单,首先获得鼠标在 canvas 上的坐标,计算当前坐标在 ...

  4. Oracle数据块损坏篇之10231内部事件

    实验:某个分区数据块损坏,不完全恢复此分区表数据 背景:数据库没有有效备份,某个分区中有数据块损坏. 要求:最大限度恢复此分区数据. 环境:RHEL 6.4 + Oracle 11.2.0.4 1. ...

  5. Extjs中给同一个GridPanel中的事件添加参数的方法

    Extjs中给同一个GridPanel中的事件添加参数的方法: this.isUse = new Ext.Action({            text:'启用',            scope ...

  6. Delphi XE的RTTI增强，动态Hook某些内部事件

    Delphi2010之后的RTTI做了很大休整,现在用起来很爽了哦.甚至可以获取某些类的内部私有单元,然后为其赋值!讲这个RTTI增强的,可以参考网上的多个博客内容,我列举一下: Delphi2010 ...

  7. 【sping揭秘】8、容器内部事件发布（一）

    容器内部事件发布 Spring的applicationContext容器提供的容器内事件发布功能,是通过java提供的自定义事件实现的 事件类型:eventObject 类继承 事件监听:eventL ...

  8. vue使用svg，animate事件绑定无效问题及解决方法

    由于使用svg制作圆形进度条,但是进度展示的太生硬,没有过渡圆滑的效果,所以使用 animate(在svg元素里可以查到) 元素标签,但 这样使用了,还是没有效果,我前端使用的 vue ,所以通过 @ ...

  9. ios中将事件添加到系统日历

    - (void)saveEvent:(id)sender { //事件市场 EKEventStore *eventStore = [[EKEventStore alloc] init]; //6.0及 ...

随机推荐

  1. mac版MyEclipse的安装及创建web项目

    这两天快被MyEclipse整死了,因为电脑是mac系统的,安装MyEclipse mac破解版时一直是不成功,弄了一天多才行,接着创建web项目HttpServlet在Tomcat发布时总是出现40 ...

  2. Deep Learning (Python, C, C++, Java, Scala, Go)

    https://github.com/donaldlee2008/DeepLearning

  3. Task Cancellation: Parallel Programming

    http://beyondrelational.com/modules/2/blogs/79/posts/11524/task-cancellation-parallel-programming-ii ...

  4. STM32的优先级NVIC_PriorityGroupConfig的理解及其使用(转)

    源:http://blog.csdn.net/yx_l128125/article/details/9703843 写作原由:因为之前有对stm32 优先级做过研究,但是没时间把整理的东西发表,最近项 ...

  5. mysql 触发器学习

    1. 一个简单的例子 1.1. 创建表: create table t(s1 integer); 1.2. 触发器: delimiter | create trigger t_trigger befo ...

  6. offsetTop、clientTop、scrollTop、offsetTop各属性介绍

    HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对 ...

  7. CSS实现三角形方法二--border+content

    方法说明: 1.将一个div块的内容设置为空(content=" "), 2.设置它的边框(上下左右)颜色为透明(transparent), 3.设置它的左侧边框颜色为pink. ...

  8. arcengine C#关于动态添加图层

    动态加载影像图层为例 研究了两三天算是弄出来了.本例适合影像数据量特别的大程序使用,可以动态的添加删除影像数据,还有不完善的地方,不过基本满足要求. 1.首先得到关键点的图层 m_Map = axMa ...

  9. Go的pprof使用

    go中有pprof包来做代码的性能监控,在两个地方有包: net/http/pprof runtime/pprof 其实net/http/pprof中只是使用runtime/pprof包来进行封装了一 ...

  10. sgu176 Flow Construction【有源汇有上下界最小流】

    同样是模板题. 首先将有源汇转换为无源汇,假设原来的源汇为st,我们加入的源汇为ST,那么我们应该从t到s连一条流量为+∞的边,使原来的st满足收支平衡,退化为普通节点. 分离必要边和其他边,从S到T ...