Javascript 什么也没发生_Javascript_Html_Canvas_Svg

Javascript 什么也没发生

javascript html canvas svg

Javascript 什么也没发生,javascript,html,canvas,svg,Javascript,Html,Canvas,Svg,最近我一直在练习javascript和canvas。我当时正在使用canvas编写一些代码，这时我无法使用canvas实现我想要的东西。所以我切换到SVG。我将与画布相关的代码翻译成svg，并进行了尝试。什么也没显示出来。我已经采取了一小部分的代码，并张贴在这里。也许你可以告诉我我错过了什么，或者我做错了什么。提前谢谢 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con

最近我一直在练习javascript和canvas。我当时正在使用canvas编写一些代码，这时我无法使用canvas实现我想要的东西。所以我切换到SVG。我将与画布相关的代码翻译成svg，并进行了尝试。什么也没显示出来。我已经采取了一小部分的代码，并张贴在这里。也许你可以告诉我我错过了什么，或者我做错了什么。提前谢谢

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>SVG</title>
</head>

<body>

<script>
var agsvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var esvg = agsvg.namespaceURI;

xl = 400;
yl = 400;
xmarg = 160;
ymarg = 280;
xw = xl + xmarg;
yh = yl + ymarg;
xd = xl/10;
yd = yl/10;

origx = 3/4*xmarg;
origy = yl + (ymarg/7);

x1=origx+0.5;
y1=origy+5;
x2=origx+0.5;
y2=origy-yl;

var ejey = document.createElementNS (esvg,"line");
ejey.setAttributeNS ( "x1", x1);
ejey.setAttributeNS ( "y1", y1);
ejey.setAttributeNS ( "x2", x2);
ejey.setAttributeNS ( "y2", y2);
ejey.setAttributeNS ( "style", "stroke:#000000;stroke-width:1");
agsvg.appendChild (ejey);

document.body.appendChild(agsvg);
</script>

</body>
</html>


SVG
var agsvg=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
var esvg=agsvg.namespaceURI；
xl=400；
yl=400；
xmarg=160；
ymarg=280；
xw=xl+xmarg；
yh=yl+ymarg；
xd=xl/10；
yd=yl/10；
origx=3/4*xmarg；
origy=yl+（ymarg/7）；
x1=origx+0.5；
y1=origy+5；
x2=原点X+0.5；
y2=原始yl；
var ejey=document.createElements（esvg，“行”）；
合欢属（“x1”，x1）；
"y1,y1",；
合欢树（“x2”，x2）；
(y2,y2),；
setAttributeNS（“样式”，“笔划：#000000；笔划宽度：1”）；
agsvg.appendChild（ejey）；
document.body.appendChild（agsvg）；

您使用的

setAttributeNS（）

不正确。将其更改为

setAttribute（）

，代码将正常工作。

该函数占用三个参数，您只提供了两个！而且您没有将其用于预期用途

ejey.setAttributeNS ( "x1", x1);
ejey.setAttributeNS ( "y1", y1);
ejey.setAttributeNS ( "x2", x2);
ejey.setAttributeNS ( "y2", y2);
ejey.setAttributeNS ( "style", "stroke:#000000;stroke-width:1");

您可能需要使用。将这些更改为：

ejey.setAttribute ( "x1", x1);
ejey.setAttribute ( "y1", y1);
ejey.setAttribute ( "x2", x2);
ejey.setAttribute ( "y2", y2);
ejey.setAttribute ( "style", "stroke:#000000;stroke-width:1");

Fiddle:

ejey.setAttributeNS（null，“x1”，x1）修复它或改用setAttribute（）
。阅读vs上的文档