awn*_*osh 5 html javascript svg
如果可能的话,我真的想让这个没有jQuery.我正在尝试通过JavaScript滑块使用称为"嘴"的SVG路径进行动画制作,这样路径就会无缝移动到显得悲伤或快乐.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Pattern editor">
<meta name="keywords" content="HTML,CSS,SVG,JavaScript">
<script>
< ![CDATA[
function refresh() {
var slider1 = parseInt(document.getElementById("slider1").value);
if (slider1 > 0) {
var path = document.getElementById('smile');
var segments = path.pathSegList;
segments.getItem(2).y = +10;
} else if (slider1 <= 0) {
var path = document.getElementById('smile');
var segments = path.pathSegList;
segments.getItem(2).y = -10;
}]] >
</script>
</head>
<body onload="refresh()">
<h1>trying to move the line</h1>
<div>Circle size:
<input id="slider1" type="range" min="-10" max="10" onchange="refresh()" />
</div>
<svg width="600" height="600">
<circle id="face" cx="90" cy="90" r="70" stroke="black" stroke-width="1" fill="yellow" />
<path id="mouth" d="M45,110 C80,110 140,110 150,110" style="fill:none;stroke:deeppink;stroke-width:3" </svg>
</body>
</html>
我已经通过仅使用 Javascript 来帮助您提出了一个可能的解决方案：
为了在视觉上获得悲伤或快乐面孔的正确外观，我调整了输入的最小值和最大值，如下所示：
<input id="slider1" type="range" min="0" max="20" />
我通过使用以下方式获取嘴巴的 svg 路径：
var mouth = document.getElementById("mouth");
为了使滑块以正确的事件运行，我声明了一个 EventListener，如下所示：
slider.addEventListener("change", function() {
console.log(this.value);
mouth.setAttribute("d", "M45,110 C80," + 10 * this.value + " 140,110 150,110");
});
在上面的代码中，您可以使用 获取滑块的当前值this.value。然后，通过使用mouth.setAttribute("d", "values...")，您可以实时覆盖嘴巴的 svg 路径值。
像这样的东西：
<input id="slider1" type="range" min="0" max="20" />
var mouth = document.getElementById("mouth");
尽管如此，第一个解决方案可以通过调整嘴巴的 svg 路径来优化。
| 归档时间： |
|
| 查看次数： |
140 次 |
| 最近记录： |