操纵SVG元素的可见性

时间：2018-06-03 11:01:42

标签： javascript jsp svg

我正在创建一个Java Web项目，我希望用一些javascript来操作一些前端SVG元素。

我正在制作一个相当简单的车库图，我有一个来自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代码

Here is an example of an SVG-drawing without the dynamic data, only dummy data

1 个答案:

答案 0 :(得分：2)

切换给定元素的可见性

您希望有一个隐藏和显示SVG元素某些部分的功能。我使用的方法实际上适用于任何给定的HTML元素（对象HTMLElement）。你需要：

  1. 提供您要隐藏/显示班级名称的元素，例如：

    <line class="segments" x1="55" y1="55" ... stroke-dasharray: 10 5"/>
<line class="segments" x1="550" y1="55" ... stroke-dasharray: 10 5"/>

  2. 写一个函数来切换给定元素的可见性：

    • 我们将创建一个函数hide()来隐藏HTMLElement 

      const hide = e => e.style.display = 'none'

    • 和一个show()函数来显示它...... 

      const show = e => e.style.display = ''

    • 最后，处理切换的功能：

      const toggleHide = function(selector) {
  [...document.querySelectorAll(selector)].forEach(e => e.style.display ? show(e) : hide(e))
}

  3. 最后调用该功能的触发器，我们可以使用button：

    <button onclick="toggleHide('.frame')">Toggle frame</button>

    设置要在按钮的onclick属性中调用的函数，并将其作为参数提供给要链接到的元素的选择器（此处为.frame）。 I.E.此按钮将使用班级名称.frame切换所有元素的可见性。

    4. 使用svg绘图进行演示

    在下面的演示中，我添加了两个链接到两组svg元素的按钮。点击显示代码段＆gt; 运行代码段＆gt; 整页预览：

    const hide = e => e.style.display = 'none'
const show = e => e.style.display = ''
const toggleHide = function(selector) {
  [...document.querySelectorAll(selector)].forEach(e => e.style.display ? show(e) : hide(e))
}
    <html>

<body>
  <SVG width="780" height="600">
<rect x="0" y="0" height="600" width="55"
        style="stroke:#000000; fill: #ffffff"/>
<rect x="55" y="0" height="600" width="55"
        style="stroke:#000000; fill: #ffffff"/>
<rect x="110" y="0" height="600" width="55"
        style="stroke:#000000; fill: #ffffff"/>
<rect x="165" y="0" height="600" width="55"
        style="stroke:#000000; fill: #ffffff"/>
<rect x="220" y="0" height="600" width="55"
        style="stroke:#000000; fill: #ffffff"/>
<rect x="275" y="0" height="600" width="55"
        style="stroke:#000000; fill: #ffffff"/>
<rect x="330" y="0" height="600" width="55"
        style="stroke:#000000; fill: #ffffff"/>
<rect x="385" y="0" height="600" width="55"
        style="stroke:#000000; fill: #ffffff"/>
<rect x="440" y="0" height="600" width="55"
        style="stroke:#000000; fill: #ffffff"/>
<rect x="495" y="0" height="600" width="55"
        style="stroke:#000000; fill: #ffffff"/>
<rect x="550" y="0" height="600" width="55"
        style="stroke:#000000; fill: #ffffff"/>
<rect x="605" y="0" height="600" width="55"
        style="stroke:#000000; fill: #ffffff"/>
<rect x="660" y="0" height="600" width="55"
        style="stroke:#000000; fill: #ffffff"/>
<rect x="715" y="0" height="600" width="55"
        style="stroke:#000000; fill: #ffffff"/>
<rect x="770" y="0" height="600" width="55"
        style="stroke:#000000; fill: none"/>
<rect x="0" y="50" height="15" width="825"
        style="stroke:#000000; fill: none"/>
<rect x="0" y="535" height="15" width="825"
        style="stroke:#000000; fill: none"/>

<rect class="frame" x="550" y="50" height="500" width="230"
        style="stroke:#000000; stroke-width: 5; fill: none"/>
<rect x="440" y="0" height="600" width="1"
        style="stroke:#000000; stroke-width: 3; fill: none"/>

<rect x="550" y="50" height="15" width="15"
        style="stroke:#000000; fill: #101111"/>
<rect x="550" y="535" height="15" width="15"
        style="stroke:#000000; fill: #101111"/>
<rect x="765" y="50" height="15" width="15"
        style="stroke:#000000; fill: #101111"/>
<rect x="765" y="535" height="15" width="15"
        style="stroke:#000000; fill: #101111"/>
<rect x="550" y="300" height="15" width="15"
        style="stroke:#000000; fill: #101111"/>
<rect x="765" y="300" height="15" width="15"
        style="stroke:#000000; fill: #101111"/>
<rect x="110" y="50" height="15" width="15"
        style="stroke:#000000; fill: #101111"/>
<rect x="110" y="535" height="15" width="15"
        style="stroke:#000000; fill: #101111"/>
<rect x="408" y="50" height="15" width="15"
        style="stroke:#000000; fill: #101111"/>
<rect x="408" y="535" height="15" width="15"
        style="stroke:#000000; fill: #101111"/>
  <line class="segments" x1="55" y1="55" x2="550" y2="550"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5"/>
  <line class="segments" x1="550" y1="55" x2="55" y2="550"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5"/>
  
  <text x="400" y="620" fill="Red">7,8 m</text>
  <text x="835" y="300" fill="Red">6 m</text>
  
  <defs>
    <marker id="beginArrow" 
    	markerWidth="9" markerHeight="9" 
    	refX="0" refY="4" 
    	orient="auto">
        <path d="M0,4 L8,0 L8,8 L0,4" style="fill: #c40d0d;" />
    </marker>
    <marker id="endArrow" 
    	markerWidth="9" markerHeight="9" 
    	refX="8" refY="4" 
    	orient="auto">
        <path d="M0,0 L8,4 L0,8 L0,0" style="fill: #c40d0d;" />
    </marker>
</defs>
<line x1="0"  y1="630" x2="825"   y2="630" 
	style="stroke:#c40d0d;
	marker-start: url(#beginArrow);
   marker-end: url(#endArrow);"/>
<defs>
    <marker id="beginArrow2" 
    	markerWidth="9" markerHeight="9" 
    	refX="0" refY="4" 
    	orient="auto">
        <path d="M0,4 L8,0 L8,8 L0,4" style="fill: #c40d0d;" />
    </marker>
    <marker id="endArrow2" 
    	markerWidth="9" markerHeight="9" 
    	refX="8" refY="4" 
    	orient="auto">
        <path d="M0,0 L8,4 L0,8 L0,0" style="fill: #c40d0d;" />
    </marker>
</defs>
<line x1="865"  y1="0" x2="865"   y2="600" 
	style="stroke:#c40d0d;
	marker-start: url(#beginArrow);
   marker-end: url(#endArrow);"/>
   
    
</SVG>

  <p>click on the buttons to remove some parts of the shed</p>

  <button onclick="toggleHide('.segments')">Toggle bars</button>
  <button onclick="toggleHide('.frame')">Toggle frame</button>

</body>

</html>

相关问题
最新问题