Я делаю веб-проект на Java, где хочу манипулировать некоторыми внешними SVG-элементами с помощью некоторого JavaScript.
Я делаю довольно простой чертеж гаража, где у меня естьЭлемент shed со страницы JSP.
Мне нужна функция javascript, кнопка включения / выключения, где элемент может отображаться, а не скрываться.
Вот мой код:
....
<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>
Я использую оператор if для отображения с или без сарая в моем jsp, но можно ли использовать кнопку щелчка для его отображения после отображения страницы
Я думал очто-то вроде этого.
function myFunction() {
var SVGcode ="//insert html code here";
document.getElementById("demo").innerHTML = SVGcode;
}
проблема в том, что SVG-код слишком велик, поэтому я не знаю, что здесь делать
РЕДАКТИРОВАТЬ:
вот изображениекак это выглядит, пока у меня просто есть функция, которая пишет Hello, когда кнопка нажата, но я хотел иметь кнопку включения, которая добавляет дополнительный SVG-код
