JavaScript，SVG，HTML和CSS
[英]JavaScript, SVG, HTML, and CSS
问题描述
I really want to get this working with no jQuery if possible. 
如果可能的话，我真的想让这个没有jQuery 。 I'm trying to make the SVG path called "mouth" be animated through the slider with JavaScript , so the path will seamlessly move to appear sad or happy. 我正试图通过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>
2 个解决方案
解决方案1
1 已采纳 2015-11-04 17:25:46
I've made a possible solution by using only Javascript to help you: 我通过仅使用Javascript来帮助您，从而制定了可行的解决方案：
To get visually a proper appearance of a sad or happy face, I adjusted the min and max values of your input, as follow: 为了在视觉上看到悲伤或快乐脸的正确外观，我调整了输入的最小值和最大值，如下所示：
<input id="slider1" type="range" min="0" max="20" />
I'm getting the mouth's svg path by using: 我通过使用以下方式得到了嘴巴的svg路径：
var mouth = document.getElementById("mouth");
To make the slider run with the proper event, I'm declaring an EventListener, as follow: 要使滑块与正确的事件一起运行，我将声明一个EventListener，如下所示：
slider.addEventListener("change", function() {
console.log(this.value);
mouth.setAttribute("d", "M45,110 C80," + 10 * this.value + " 140,110 150,110");
});
In the code above, you can get the current value of the slider with this.value . 在上面的代码中，您可以使用this.value获取滑块的当前值。 Then, by using mouth.setAttribute("d", "values...") , you can overwrite in realtime the mouth's svg path values. 然后，通过使用mouth.setAttribute("d", "values...") ，您可以实时覆盖嘴的svg路径值。
Something like this: 像这样的东西：
(function() { var slider = document.getElementById("slider1"); var mouth = document.getElementById("mouth"); slider.addEventListener("change", function() { console.log(this.value); mouth.setAttribute("d", "M45,110 C80," + 10 * this.value + " 140,110 150,110"); }); })();
<h1>trying to move the line</h1> <div>Circle size: <input id="slider1" type="range" min="0" max="20" /> </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>
Still, this first solution can be optimized by adjusting the mouth's svg path. 仍然，可以通过调整嘴的svg路径来优化第一种解决方案。
解决方案2
1 2015-11-04 18:14:54
You have several problems in your JavaScript code. 您的JavaScript代码中存在多个问题。
Your getElementById call is using id="smile" but the HTML is using id="mouth". 你的getElementById调用使用id =“smile”，但HTML使用的是id =“mouth”。
Your getItem call is using index 2 when it should be using index 1. The path only has two segments (moveTo command and curveTo command). 当它应该使用索引1时，你的getItem调用正在使用索引2.该路径只有两个段（moveTo命令和curveTo命令）。
You are assigning new value to y (which is the end point of curve) when you probably should be assigning new values to y1 and y2 (which are the control points that define the curve). 当您可能应该为y1和y2（它们是定义曲线的控制点）分配新值时，您将为y指定新值（这是曲线的终点）。
You are assigning new values of +10 and -10. 您正在分配+10和-10的新值。 You should probably me assigning new values based on a combination of slider value and edge of mouth. 您可能应该根据滑块值和边缘的组合分配新值。
The following is a possible solution that fixes the above errors. 以下是修复上述错误的可能解决方案。
function refresh() {
var sliderValue = parseInt(document.getElementById("slider1").value);
var path = document.getElementById('mouth');
var segments = path.pathSegList;
segments.getItem(1).y1 = segments.getItem(1).y + sliderValue;
segments.getItem(1).y2 = segments.getItem(1).y + sliderValue;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.