在坐标之间画一条线(使用svg)

时间:2017-04-12 11:12:49

标签: jsp svg

感谢一些帮助将我认为的svg路径元素嵌入到jsp中的if语句中。

我在设定的位置显示一个图标,然后,如果位置发生变化,我会在新位置重新显示一个图标,这可以使用两个变量正常工作。

var xx=response[1];
var yy=response[2];

我想'画'使用path元素(svg)在当前位置和new之间的一条线或箭头但不确定如何在jsp中的if语句中实现svg

if((xx != oldxx || yy != oldyy) 
{

我认为该陈述应该是 -

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="L xx yy" fill="transparent" stroke="black"/>
</svg>

但不想引用外部网站(w3.org),因此可能需要将部分或全部svg嵌入到jsp中并在if语句中调用path元素。道歉我的编码技巧相对较弱。

尝试以下操作,但这会导致原始图标消失且没有绘制的行(注释掉的行导致语法问题)

var xx=response[1];
var yy=response[2];

if(xx != oldxx || yy != oldyy)
{
addImg(assetid, xx, yy, ' ', name, icon);
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<%--
<path d="M $(oldxx) $(oldyy) L $(xx) $(yy)" fill="transparent" stroke="black"/>
--%>
<path d="M oldxx oldyy L xx yy" fill="none" stroke="black" stroke-width="4"/>
</svg>
}

协助表示赞赏。 问候 活性

1 个答案:

答案 0 :(得分:1)

应该是这样的:

<c:if test="$(xx != oldxx || yy != oldyy)">
  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <path d="M $(oldxx) $(oldyy) L $(xx) $(yy)" fill="none" stroke="black"
          stroke-width="4"/>
  </svg>
</c:if>

或者,如果它位于代码块的中间,您可能更愿意这样做:

if (xx != oldxx || yy != oldyy)
{ %>
  <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
    <path d="M $(oldxx) $(oldyy) L $(xx) $(yy)" fill="none" stroke="black"
          stroke-width="4"/>
  </svg>
<% )

您还必须考虑如何将其放置在页面上的正确位置。您尚未指定如何绘制页面的其余部分(图标等),因此我无法帮助您完成该部分。