1、
2、
<!DOCTYPE html><html><head> ???<meta charset="UTF-8"> ???<script type="text/javascript" > ???<!-- ???????function StrokeDasharray(_value) ???????{ ???????????console.log("dash array : "+_value); ???????????var svgForStrokeLine = document.getElementById("svgForStrokeLine"); ???????????svgForStrokeLine.setAttribute("stroke-dasharray", _value); ???????} ???????function StrokeDashoffset(_value) ???????{ ???????????console.log("dash offset : "+_value); ???????????var svgForStrokeLine = document.getElementById("svgForStrokeLine"); ???????????svgForStrokeLine.setAttribute("stroke-dashoffset", _value); ???????????var value01 = svgForStrokeLine.getAttribute("stroke-dashoffset"); ???????????console.log("dash offset - value : "+value01); ???????} ???--> ???</script></head><body> ???<svg id="svgForStroke" width="400" height="200" xmlns="http://www.w3.org/2000/svg"> ????<g> ?????<line id="svgForStrokeLine" fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="0" y1="90" x2="400" y2="90"/> ????</g> ???</svg> ???<p>点击下面的滑块（或输入数值）体验下：<br> ???<!-- ???????<strong>stroke-dasharray:</strong> ???????<input type="range" min="0" max="400" value="0" size="30" onchange=‘javascript:document.querySelector("#svgForStroke line").setAttribute("stroke-dasharray", this.value)‘ /> ???????<br> ???????<strong>stroke-dashoffset:</strong> ???????<input type="range" min="0" max="400" value="0" size="30" onchange=‘javascript:document.querySelector("#svgForStroke line").setAttribute("stroke-dashoffset", this.value)‘ /> ???--> ???????<strong>stroke-dasharray:</strong> ???????<input type="range" min="0" max="400" value="0" size="30" onchange=‘StrokeDasharray(this.value)‘ /> ???????<br> ???????<strong>stroke-dashoffset:</strong> ???????<input type="range" min="0" max="400" value="0" size="30" onchange=‘StrokeDashoffset(this.value)‘ /> ???</p></body></html>3、
4、
5、
js.事件函数
原文地址：https://www.cnblogs.com/h5skill/p/8398494.html