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. 配置cinder使用NFS后端

    首先先使用“cinder delete”命令删除所有实例,释放磁盘空间. 停止cinder服务:service openstack-cinder-api stopservice openstack-c ...

  2. Python3基础 list() 将一个字符串转换成列表

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  3. Spring MVC 与ExtJS完美集成

    http://blog.csdn.net/q262800095/article/details/12021191 http://www.jb51.net/article/25267.htm

  4. CodeForces 609D Gadgets for dollars and pounds

    二分天数+验证 #include<cstdio> #include<cstring> #include<cmath> #include<algorithm&g ...

  5. USACO Section 1.1 Greedy Gift Givers 解题报告

    题目 问题描述 有若干个朋友,朋友之间可以选择互相赠送一些有价值的礼物.一个人可以选择将一部分钱分给若干个朋友,例如某人送给其他两个人钱,总共赠送3元,两个人平均分,原本应该是每人1.5元,但是只能取 ...

  6. SpingMvc 注解的使用

    1.使用注解减少配置xml文件 2.注解可以降低耦合度 3.使用注解编写的普通类 import javax.servlet.http.HttpServletRequest; import org.sp ...

  7. ELK 日志分析体系

    ELK   日志分析体系 ELK 是指 Elasticsearch.Logstash.Kibana三个开源软件的组合. logstash                       负责日志的收集,处 ...

  8. java web系统优化, mysql查询优化

    1. 采用数据库连接池技术 2. 优化sql语句格式, 比如用PreparedStatement代替Statement, 前者避免重复编译, 后者每次都需要对数据库进行解析编译, 降低数据库的访问效率 ...

  9. 有趣的keil MDK细节（转）

    源:有趣的keil MDK细节 1.MDK中的char类型的取值范围是? 在MDK中,默认情况下,char 类型的数据项是无符号的,所以它的取值范围是0-255.它们可以显式地声明为signed ch ...

  10. webform中 ajax调用后台方法(非webservice)

    方法一:通过创建一个没有内容的窗体 后台: public partial class Ajax_ShoppingCart : System.Web.UI.Page { bookdbDataContex ...