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>
