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、
原文地址：https://www.cnblogs.com/h5skill/p/8398494.html
时间： 2024-10-03 14:57:50