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、
