我正在制作一个JavaWeb项目,我想用一些JavaScript操作一些前端SVG元素。
我正在绘制一个相当简单的车库图,其中有一个来自jsp页面的shed元素。
我想要一个javascript函数,on/off按钮,其中的元素可以显示而不是隐藏。
这是我目前的代码:
....
<line x1="<%= Math.abs(wid+20) %>" y1="0" x2="<%= Math.abs(wid+20) %>" y2="<%= len %>"
style="stroke:#c40d0d;
marker-start: url(#beginArrow);
marker-end: url(#endArrow);"/>
//this is the start of the part that I want to be toggled on and off with a javascript function
<% if(shed){ %>
<rect x="<%= Math.abs(wid-200) %>" y="0" height="<%= len %>" width="200"
style="stroke:#000000; stroke-width: 3; fill: none"/>
<rect x="<%= Math.abs(wid-200) %>" y="0" height="10" width="10"
style="stroke:#000000; fill: #101111"/>
<rect x="<%= Math.abs(wid-10) %>" y="0" height="10" width="10"
style="stroke:#000000; fill: #101111"/>
<rect x="<%= Math.abs(wid-200) %>" y="<%= Math.abs(len-10) %>" height="10" width="10"
style="stroke:#000000; fill: #101111"/>
<rect x="<%= Math.abs(wid-10) %>" y="<%= Math.abs(len-10) %>" height="10" width="10"
style="stroke:#000000; fill: #101111"/>
<text x="<%= Math.abs((wid-200)+(wid/8)) %>" y="<%= Math.abs(len+35) %>" fill="Red"> Skur: 200.0 cm </text>
<line x1="<%= Math.abs(wid-200) %>" y1="<%= Math.abs(len+20) %>" x2="
<%= wid %>" y2="<%= Math.abs(len+20) %>"
style="stroke:#c40d0d;
marker-start: url(#beginArrow);
marker-end: url(#endArrow);"/>
<% } %>
</SVG>
<form action="FrontController?command=DynamicCarportSide" name="order" method="POST">
<input type="hidden" name="length" value="<%= len %>">
<input type="hidden" name="width" value="<%= wid %>">
<input type="hidden" name="shed" value="<%= shed %>">
<input type="submit" value="Side tegning">
</form>
<%@include file="footer.jsp" %>
</body>
</html>
我在jsp中使用if语句来显示是否有shed,但是在页面呈现之后可以使用click按钮来显示它吗?
我在想这样的事。
function myFunction() {
var SVGcode ="//insert html code here";
document.getElementById("demo").innerHTML = SVGcode;
}
问题是svg代码太多了,所以我不知道该怎么做
编辑:
这里有一张图片展示了它的外观,到目前为止,我只有一个函数,当按下按钮时,它会写hello,但是我希望有一个开关打开按钮,它会添加额外的svg代码
