Hi, Now I placed a arrowhead in middle of the line using path element. First I say thank you every body to provide a best solutions. I placed here one sample file to draw a arrow head line.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd";> <svg width="100%" height="100%" onload="init(evt);"> <script> <![CDATA[ var SVGDocument = null; var SVGRoot = null; function init(evt) { alert("Click the element to create Connectivity"); SVGDocument = evt.getTarget().getOwnerDocument(); SVGRoot = SVGDocument.documentElement; } function createConnectivity(objectName,direction) { SVGDocument = evt.getTarget().getOwnerDocument(); SVGRoot = SVGDocument.documentElement; var pt1 = SVGDocument.getElementById(objectName).getTotalLength(); centerPoint=pt1/2; var centerpointposition1 = SVGDocument.getElementById(objectName).getPointAtLength(centerPoint); var centerpointposition2 = 0; var arrowLine=SVGDocument.createElement("path"); arrowLine.setAttribute("id","al"); // to draw a arrow head in different direction if(direction==1) { centerpointposition2 = SVGDocument.getElementById(objectName).getPointAtLength(centerPoint+1); arrowLine.setAttribute("d", "M " + centerpointposition1.x + " " + centerpointposition1.y + " L " + (centerpointposition2.x) + " " + (centerpointposition2.y)); arrowLine.setAttribute("marker-start","url('#myMarker')"); alert(direction); }else { centerpointposition2 = SVGDocument.getElementById(objectName).getPointAtLength(centerPoint-1); arrowLine.setAttribute("d", "M " + centerpointposition1.x + " " + centerpointposition1.y + " L " + (centerpointposition2.x) + " " + (centerpointposition2.y)); arrowLine.setAttribute("marker-start","url('#myMarker')"); alert(direction); } marker=SVGDocument.getElementById("myMarker"); gElement=SVGDocument.getDocumentElement().appendChild(arrowLine); } ]]></script><marker id="myMarker" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="strokeWidth" orient="auto" markerWidth="20" markerHeight="20"> <polyline points="0,0 10,5 0,10 1,5" fill="darkblue" /> </marker><path id="p2" d="M 30 70 L 60 70 L 90 100" style="fill:none; stroke:black; stroke-width:3;" onmousedown="createConnectivity('p2',1)"/><path id="p3" d="M 100 70 L 130 70 L 160 100" style="fill:none; stroke:black; stroke-width:3;" onmousedown="createConnectivity('p3',2)"/><path id="p4" d="m 10 10 L 50 10 L 100 10" style="fill:darkblue; stroke:green; stroke-width:3;" onmousedown="createConnectivity('p4',2)"/><path id="path1" d= "M 210,210 L 220,220 L 230,230 L 240,240 L 250,250" style="fill:darkblue; stroke:blue; stroke-width:2;" onmousedown="createConnectivity('path1',2)"/><path id="path3" d= "M 200,200 L 320,320 L 330,330 L 340,340 L 350,350" style="fill:darkred; stroke:darkred; stroke-width:2;" onmousedown="createConnectivity('path3',1)"/><rect x="350" y="320" width="50" height="50" fill="none" stroke="blue"/><rect x="150" y="170" width="50" height="50" fill="none" stroke="blue"/><rect x="0" y="5" width="550" height="560" fill="none" stroke="blue"/></svg> I wish to share some lines about this code. I get the length of the line using .getTotalLength() and find the middle point. I get the centre point co-ordinates getThe I get the middlepoint + 1. Then get the another co-ordinates of the middle point using getPointAtLength(centerPoint). As the same way I got another co-ordiantes. I draw a line from both co-ordinates and place the arrow head in start or end place. Thanks Raghu J raghu raman <[EMAIL PROTECTED]> wrote: Hi Andreas I have got the center point using .getTotalLength() and getPointAtLength(). I also have center point coordinates. Thank you very much. Its work well. But now my doubt is how I can I animate using <animateMotion/> to place the symbol or an element in center poitn co-ordinates. Raghu Andreas Neumann <[EMAIL PROTECTED]> wrote: You could use <animateMotion /> to "animate" your symbol to 50% (using discreet values) and set fill "freeze" to make the symbol stay there. The advantage of this approach is that the symbol can be rotated automatically. See http://www.w3.org/TR/SVG11/animate.html#AnimateMotionElement or http://www.carto.net/papers/svg/samples/path_animation.shtml The other alternative would be to use javascript. The methods .getTotalLength() and .getPointAtLength() help you to find the position at 50% of the path. The tricky part is to find the orientation: for finding that you would have to read the path geometry itself ... As Philippe said, there is no easy solution for that. Andreas --- In [email protected], raghu raman <[EMAIL PROTECTED]> wrote: > I need to draw a arrow head in middle of the given path. > <path d="M 212747656,-190398966 L 212721062,-190451692 L 212437743,-190301694 L 212430133,-190282952 L 212258060,-190192589"/> > Kindly let me know your solutions > > > > Raghu > > > > Yahoo! India Matrimony: Find your life partneronline. > > [Non-text portions of this message have been removed] ----- To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ---- Yahoo! Groups Sponsor Get unlimited calls to U.S./Canada --------------------------------- Yahoo! Groups Links To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ To unsubscribe from this group, send an email to: [EMAIL PROTECTED] Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service. Yahoo! India Matrimony: Find your life partneronline. [Non-text portions of this message have been removed] ----- To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ---- --------------------------------- Yahoo! Groups Links To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ To unsubscribe from this group, send an email to: [EMAIL PROTECTED] Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service. Yahoo! India Matrimony: Find your life partneronline. [Non-text portions of this message have been removed] ----- To unsubscribe send a message to: [EMAIL PROTECTED] -or- visit http://groups.yahoo.com/group/svg-developers and click "edit my membership" ---- Yahoo! Groups Links <*> To visit your group on the web, go to: http://groups.yahoo.com/group/svg-developers/ <*> To unsubscribe from this group, send an email to: [EMAIL PROTECTED] <*> Your use of Yahoo! Groups is subject to: http://docs.yahoo.com/info/terms/
