使用JavaScript编辑svg标记内的line标记
[英]Editing a line tag inside svg tag using javascript
问题描述
我正在尝试创建一条线以从窗口的一侧绘制到另一侧。 使用javascript我希望它在某个时刻。 我想检测窗口大小和导航栏高度。 我的问题是未显示该行。
这是我的javascript和html代码：
<script>
function createLineScreenWidth() {
var elem = getElementsByTagName("svg")[0];
var line = getElementsByTagName("line")[0];
var y_pos = getElementByID("navbar").height;
elem.style.height = "10";
elem.style.width = screen.width;
line.style.stroke = rgb(188, 204, 229);
line.x2 = screen.width;
line.y1 = line.y2 = y_pos;
}
</script>
<div class="navbar" id="navbar">
<nav>
<a href="/contact/"><div class="pageIcon">CONTACT</div></a>
<a href="/products/"><div class="pageIcon">PRODUCTS</div></a>
<a><div class="pageIcon onpageIconChange">ABOUT</div></a>
</nav>
</div>
<svg onload="createLineScreenWidth()">
<line x1="0" style="stroke-width: 2;" />
</svg>
1 个解决方案
解决方案1
0 2017-06-03 19:34:57
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ds</title> <style> #navbar{ position: relative; } </style> </head> <body> <script> function createLineScreenWidth() { var elem = document.getElementsByTagName("svg")[0]; var line = document.getElementsByTagName("line")[0]; var y_pos = document.getElementById("navbar").clientHeight; elem.style.height = "100"; elem.style.width = screen.width; // line.style.stroke = "red"; // line.x2 = screen.width; // line.y1 = line.y2 = y_pos; line.setAttribute('x1','0'); line.setAttribute('y1',y_pos); line.setAttribute('x2',screen.width); line.setAttribute('y2',y_pos); line.setAttribute("stroke", "rgb(188, 204, 229)") elem.appendChild(line); } </script> <div class="navbar" id="navbar"> <nav> <a href="/contact/"><div class="pageIcon">CONTACT</div></a> <a href="/products/"><div class="pageIcon">PRODUCTS</div></a> <a><div class="pageIcon onpageIconChange">ABOUT</div></a> </nav> </div> <svg onload="createLineScreenWidth()"> <line x1="0" style="stroke-width: 2;" /> </svg> </body> </html>
其实有很多错误
- 缺少document.get
- 是clientHeight而不是height
- 没有rgb函数，您必须将该值用双引号引起来
- 最后但并非最不重要的是代替线。 我正在使用.setAttribute，这更清楚了我们在做什么IMO
svg标记内的Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.