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. 转：Visual Studio进行Web性能测试- Part III

    原文作者:Ambily.raj 对于一个多用户的应用程序,性能是非常重要的.性能不仅是执行的速度,它包括负载和并发方面.Visual Studio是可以用于性能测试的工具之一.Visual Studi ...

  2. Fox And Names

    Description Fox Ciel is going to publish a paper on FOCS (Foxes Operated Computer Systems, pronounce ...

  3. CultureInfo中重要的InvariantCulture

    CultureInfo简述 CultureInfo类位于System.Globalization命名空间内,这个类和这个命名空间许多人都不了解也认为不需要太多了解,实际上,你写的程序中会经常间接得使用 ...

  4. eclipse proxy

    -Dorg.eclipse.ecf.provider.filetransfer.excludeContributors=org.eclipse.ecf.provider.filetransfer.ht ...

  5. 用free -m查看的结果：

    用free -m查看的结果: # free -m          total    used    free     shared buffers     cached Mem:           ...

  6. JAVA基础--正则表达式

    .  any character \d  A digit 0-9 \D  a non-digit [^0-9] \s  a whitespace character, 空白字符 \S  a non-w ...

  7. Apache2 MPM 模式了解

    一.MPM MPM(Multi-Processing Module (MPM) implements a hybrid multi-process multi-threaded server)是Apa ...

  8. Lumen 配置、重写、404错误等

    1.权限是否有设置为777: 2.app key是否有设置: 3.apache下是否有开启重写,a2enmod: 4.nginx下server的location是否配置正确,重写规则有没添加,rout ...

  9. Linux包管理工具分析

    转自:http://blog.csdn.net/carolzhang8406/article/details/14198219 在正式进入讨论之前,先贴几条非常有用的link: linux 发行版比较 ...

  10. mysql用存储过程插入百万条数据, 及查询优化

    查看所有存储过程: show procedure status; 查看详细存储过程 ptest: show create procedure ptest; 存储过程插入数据: create table ...