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. VS2012添加对DirectX SDK中需要文件的引用

    error LNK2019: 无法解析的外部符号 _DirectDrawCreateEx@16,该符号在函数 "int __cdecl DD_Init(int,int,int)" ...

  2. eclipse工程名出现小红叉的解决办法

    前提是eclipse工程中每个子文件都没错,工程名上却显示了小红叉. 打开[Window]->[Show View]->[General]->[Problems],看看Problem ...

  3. [iOS]C语言技术视频-13-指针变量练习三(结构体指针变量)

    下载地址: 链接: http://pan.baidu.com/s/1bnx2xm3 密码: t4mj

  4. glibc

    http://www.cnblogs.com/vipzrx/p/3599506.html 原因 wheezy是2.13,编译android4.4 需要2.14的,报错如下: rebuilts/gcc/ ...

  5. 64位系统访问注册表SOFTWARE\Microsoft\Windows\CurrentVersion\Uninstall

    public int ChecNonkWoW64() { try { ; string subKey = @"SOFTWARE\Microsoft\Windows\CurrentVersio ...

  6. office web apps部署（二）

    1.安装composer 参考 http://docs.phpcomposer.com/00-intro.md 根据系统选择安装方式 修改php.ini   去掉extension=php_opens ...

  7. Mysql主从复制（基于Log）

    Master(主)操作 实验机:两台 IP:192.168.1.5      192.168.1.10 操作系统:Linux RedHat 6.5 Mysql版本:5.6.31 #  vim /etc ...

  8. The 2014 ACMICPC Asia Regional Xian

    2题继续遗憾收场,每次都是只差最后一步.这一场却是之前那么多场中感觉距离奖牌最近的时候.好好总结一下经验教训,复盘之后好好准备下一场北京的最后一战吧. 一开始的状态非常不错,10分钟跟榜完成1A,第二 ...

  9. Ubuntu和win10双系统Grup无法引导解决方案

    通常我们经常安装双系统, 但是有时候安装完系统无法正常引导, 以下就说明Ubuntu和win10双系统, win10在grub界面不断循环的解决方案 直接在win10启动项目上按e进入编辑模式 在文档 ...

  10. linux中vi和vim编辑工具

    linux中知名的还有emacs,功能比vim还要强大 vim 如果文件存在vim是打开这个文件,若果不存在,则先新建再打开 命令模式:任何模式都可以通过Esc回到命令模式,命令模式可以通过命令进行选 ...