【博主推荐】html操作SVG图(附源码)
【博主推荐】html操作SVG图(附源码)讲解
1.支持点击事件（悬浮、双击调用不同事件）
2.支持改变文字
3.支持改变背景
4.支持改变文字颜色
5.支持动态闪烁
6.支持svg拖动
7.支持SVG放大缩小
- 效果示例 *
【博主推荐】html操作SVG图(附源码)
界面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>【博主推荐】html操作SVG图(附源码)</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onselectstart="return false">
<div id="img_svg" class="svg_css floatfix">
<svg style="width:100%;height:100%;" version="1.1" >
<g id="global_box" transform="translate(0,0)">
<ellipse cx="58.5" cy="129" cursor="pointer" rx="26.5" ry="26" fill="#FFFFFF" stroke="#000000" />
<line x1="85" y1="135" x2="155" y2="322" stroke="#000000" />
<line x1="87" y1="134" x2="137" y2="134" stroke="#000000" transform="matrix(1,0,0,1,-3,0)" />
<rect x="140" y="121" width="84" cursor="pointer" height="38" fill="white" stroke="#000000" transform="matrix(1,0,0,1,-7,-4)" />
<rect x="97" y="294" width="104" cursor="pointer" height="58" fill="white" stroke="#000000" />
<text x="49" y="133" xml:space="preserve" onclick="myClick();" cursor="pointer" font-family="Microsoft YaHei UI" font-size="12" fill="#000000" stroke="#000000" transform="matrix(1,0,0,1,-15,1)" xmlns="http://www.w3.org/2000/svg">
click</text>
<text id="changeColor" x="147" y="132" xml:space="preserve" onclick="myChangeColor();" cursor="pointer" font-family="Microsoft YaHei UI" font-size="12" fill="#000000" stroke="#000000" baseline-shift="baseline" transform="matrix(1,0,0,1,-20,8)" xmlns="http://www.w3.org/2000/svg">
change color</text>
<text id="changeText" x="114" y="328" xml:space="preserve" onclick="myChangeText();" cursor="pointer" font-family="Microsoft YaHei UI" font-size="12" fill="#000000" stroke="#000000" baseline-shift="baseline" transform="matrix(1,0,0,1,-11,0)">
change text</text>
<line x1="84" y1="135" x2="292" y2="257" stroke="#000000" />
<rect id="changeBg" x="238" y="229" width="113" height="46" cursor="pointer" fill="white" stroke="red" transform="matrix(1.35,0,0,0.9999999,-84.07517,-1.853644E-05)" xmlns="http://www.w3.org/2000/svg" />
<text x="260" y="251" xml:space="preserve" cursor="pointer" onclick="myChangebackgroundcolor();" font-family="Microsoft YaHei UI" font-size="12" fill="#000000" stroke="#000000" baseline-shift="baseline" transform="matrix(1,0,0,1,-30,6)">
change backgroundcolor</text>
<line x1="86" y1="136" x2="268" y2="338" cursor="pointer" stroke="#000000" />
<rect id="changeDisplay" x="233" y="310" width="155" height="44" option="1" cursor="pointer" fill="white" stroke="#000000" />
<text x="276" y="333" xml:space="preserve" onclick="myChangeDisplay();" cursor="pointer" font-family="Microsoft YaHei UI" font-size="12" fill="#000000" stroke="#000000" baseline-shift="baseline" transform="matrix(1,0,0,1,-22,2)" xmlns="http://www.w3.org/2000/svg">
change display</text>
<line x1="85" y1="137" x2="83" y2="399" stroke="#000000" />
<ellipse id="timeBg" cx="88" cy="400" rx="17" ry="16" fill="orange" stroke="#000000" />
</g>
</svg>
<img class="compass" src="compass.svg">
<div class="controllerBar">
<button id="restore" class="restore">100</button>
<button id="add" class="add">+</button>
<div id="ctrlbg" class="ctrlbg">
<div id="Bar" class="Bar" style="top:160px"></div>
</div>
<button id="reduce" class="reduce">-</button>
</div>
</div>
<script type="text/javascript" src="global.js"></script>
</body>
</html>
代码结构
button.png
compass.svg
global-min.js
global.js
information.svg
jquery-1.8.3.js
svg.html
standard2.png
style.css