SVG动态更改带箭头的polyline方向大小,箭头用mark-end实现

sgls652709 2015-05-20 10:31:19

最近公司交代我一个任务，用的是svg，来绘制图片。svg资料好少啊。说说我的问题吧。我要用js动态的更改带箭头的polyline方向大小,js中用箭头El.setAttribute('points'，value);来更改，结果，那条带箭头的直线不会改变，进过一个上午的排查，以及测试，发现当有marke-end的时候是无法用setAttribuet('ponits',value)来进行更改的。下面贴一下代码吧，代码是我用js生成的，排序不是很好，如果有代码密集恐惧症的朋友，请看我上边的描述，懂得人，应该可以明白我的意思了。

html内容

[

<svg><defs><marker id='moban_arrow' refX='0' refY='0' markerWidth='12' markerHeight='12' orient='auto' viewBox='0, -4, 12, 12' ><path d='M0 -4 L0 4 L10 0' style='fill:black' stroke-width='0'></path></marker></defs><polyline id='line_1432100683781' typ='step' points='282,269,244.5,365' style='stroke:black;stroke-width:1' marker-end='url(#moban_arrow)'/><path id='step_path_1432100683781' d='M244.5 365 L282 269' style='fill:none; stroke-width:0'></path><text  style='fill:black; font-size:15px;font-weight:bold'><textPath xlink:href='#step_path_1432100683781' startOffset='51.53215015890565'><tspan dy='-5'>流程步骤0<tspan></textPath></text><svg>

js内容
document.onmousedown = function() {
var line = document.getElementById('line_1432100683781');
line.setAttribute('points','100,200,300,400');

}

主要通过鼠标点击更改的时候，我如果去掉mark-end的话是可以的。或者，用window.onload取代document.onmousedown，不去掉mark-end也是可以的。真不知道什么个原因，虽然上午，我用其他的办法去取代了这部分更改，但我还是很想弄清楚为什么。不弄清楚，我以后都不敢随便使用setAttribute来动态更改元素了

最后再谢谢大家，帮忙看一看

...全文