SVG实例之电力开关-阿里云开发者社区

开发者社区> 大数据> 正文
登录阅读全文

SVG实例之电力开关

简介:
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="400" height="200" >
<script> 
function lineGClick(evt) {

var lineA = document.getElementById("lineA");
if( lineA.getAttribute("display")=="none"){

lineA.setAttribute("display","#000000");
line2.setAttribute("display","none");

}else{
lineA.setAttribute("display","none");
line2.setAttribute("display","#000000");
}
}
 </script>
<defs>
 <g id="lineG1" >
  <line id="line1" fill="none" stroke="#000000" stroke-width="4" x1="10" y1="10" x2="10" y2="40"/>
  <line id="lineA" fill="none" display="none" stroke="#000000" stroke-width="4" x1="10" y1="40" x2="10" y2="70"/>
  <line id="line2" fill="none" stroke="#000000" stroke-width="4" x1="10" y1="40" x2="35" y2="60"/>
  <line id="lineB" fill="none" stroke="#000000" stroke-width="4" x1="10" y1="70" x2="10" y2="100"/>
 </g>
</defs>

<text x="10" y="20" fill="red">一个SVG电力开关的例子。点击开关,进行状态转换</text>
<use x="10" y="30" xlink:href="#lineG1" onclick="lineGClick(evt)"/>
<a xlink:href="http://www.waylau.com" target="_blank">
<text x="10" y="180" fill="red">欢迎访问wwww.waylau.com</text>
  </a>
</svg>

效果:

解释:

defs标签定义了可以重复利用的组件

use引用了defs所定义的组件,其中onclick监听了鼠标点击事件


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
大数据
使用钉钉扫一扫加入圈子
+ 订阅

大数据计算实践乐园,近距离学习前沿技术

其他文章