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>
SVG的内部事件添加的更多相关文章
- [转]用CSS给SVG <use>的内容添加样式
来源:http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=ref ...
- Canvas 内部元素添加事件处理
目录 前言 自定义事件 有序数组 元素父类 事件判断 其他 立即执行函数 apply, call, bind addEventListener 传参 调用父类的构造函数 对象检测 isPointInP ...
- 【HTML5】Canvas 内部元素添加事件处理
前言 canvas 没有提供为其内部元素添加事件监听的方法,因此如果要使 canvas 内的元素能够响应事件,需要自己动手实现.实现方法也很简单,首先获得鼠标在 canvas 上的坐标,计算当前坐标在 ...
- Oracle数据块损坏篇之10231内部事件
实验:某个分区数据块损坏,不完全恢复此分区表数据 背景:数据库没有有效备份,某个分区中有数据块损坏. 要求:最大限度恢复此分区数据. 环境:RHEL 6.4 + Oracle 11.2.0.4 1. ...
- Extjs中给同一个GridPanel中的事件添加参数的方法
Extjs中给同一个GridPanel中的事件添加参数的方法: this.isUse = new Ext.Action({ text:'启用', scope ...
- Delphi XE的RTTI增强，动态Hook某些内部事件
Delphi2010之后的RTTI做了很大休整,现在用起来很爽了哦.甚至可以获取某些类的内部私有单元,然后为其赋值!讲这个RTTI增强的,可以参考网上的多个博客内容,我列举一下: Delphi2010 ...
- 【sping揭秘】8、容器内部事件发布（一）
容器内部事件发布 Spring的applicationContext容器提供的容器内事件发布功能,是通过java提供的自定义事件实现的 事件类型:eventObject 类继承 事件监听:eventL ...
- vue使用svg，animate事件绑定无效问题及解决方法
由于使用svg制作圆形进度条,但是进度展示的太生硬,没有过渡圆滑的效果,所以使用 animate(在svg元素里可以查到) 元素标签,但 这样使用了,还是没有效果,我前端使用的 vue ,所以通过 @ ...
- ios中将事件添加到系统日历
- (void)saveEvent:(id)sender { //事件市场 EKEventStore *eventStore = [[EKEventStore alloc] init]; //6.0及 ...
随机推荐
- java中“==”和equal区别
8个月以后就要正式找工作啦,我觉得现在是时候花时间好好深入研究一下以前比较混肴的知识.这就当作是自我成长的第一步! 对于String中的“equal方法”和“==”一直有点混肴,今天重新看了一下他们两 ...
- PAT (Advanced Level) 1057. Stack (30)
树状数组+二分. #include<iostream> #include<cstring> #include<cmath> #include<algorith ...
- 天梯赛决赛 L2-1.红色警报 并查集
L2-013. 红色警报 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 战争中保持各个城市间的连通性非常重要.本题要求你编写一 ...
- Python+Selenuim测试网站，只能打开Firefox浏览器却不能打开网页的解决方法
最开始我使用的Selenium版本为2.48,Firefox版本为37,自动化打开网站的时候,可以正常打开. 后来由于Firefox的自检测更新,版本更新为47,导致版本不兼容,自动化打开网站浏览器时 ...
- Monitorix 监控 安装配置
Monitorix 监控 安装配置 1. 首先安装RPMforge RPMforge 是由 Dag 及其他包裝者合作維護的.他們為 CentOS 提供超過 5000 個套件,包括 wine.vlc.m ...
- 关于cin的用法一些小结
在写二叉树的时候遇到if(!cin)那几个标志位弄得并不清楚,还遇到了诸如cin.clear()等函数,感觉C++又白学了,于是打算去网上搜了几篇靠谱的文章,有时候看来,一些事件处理类的工程代码,在A ...
- (简单) HDU 3308 LCIS，线段树+区间合并。
Problem Description Given n integers. You have two operations: U A B: replace the Ath number by B. ( ...
- Linux下简单的取点阵字模程序
源:Linux下简单的取点阵字模程序 Linux操作系统下进行简单的图形开发,经常会用到取字模的软件,但是Linux并没有像Windows下的小工具可用,我们也并不希望为了取字模而频繁地切换操作系统. ...
- X-002 Exyson4412芯片启动过程分析
移植u-boot到FriendlyARM Tiny4412开发板上,首先我们需要对Samsung Exyson4412芯片的启动方式.系统时钟初始化.串口初始化.内存初始化以及开发板的内存地址空间分配 ...
- 浅谈MySQL分表
关于分表:顾名思义就是一张数据量很大的表拆分成几个表分别进行存储. 我们先来大概了解以下一个数据库执行SQL的过程: 接收到SQL --> 放入SQL执行队列 --> 使用分析器分解SQL ...