使用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.