0

I have create a marker as following :

Is there a way I can drag the above line with help of the marker? Marker is right at the end of the line and I want the move/drag lines up/down only using those markers. I don't want to extend the line and overlay the marker on the extended part?

Any idea or help would be highly appreciated.

    <svg viewBox="0 0 800 600" width="800" height="600">
<defs>
  <marker id="triangle" viewBox="0 -5 10 10" refX="0" refY="0" 
markerWidth="6" markerHeight="6" orient="auto">
 <path d="M0,-5L10,0L0,5"></path></marker>
</defs>
<line x1="221.12405395507812" y1="223.1294403076172" x2="394.1240539550781"
y2="223.1294403076172" class="Horizontal" marker-end="url(#triangle)" 
style="stroke-width: 2.27357;"></line>
</svg>
Nimesh Jain
  • 11
  • 1
  • 6
  • You are out of luck with this. See my answer to [*"Click event does not work on the mark-end of path in SVG"*](/q/35370613). – altocumulus Oct 28 '16 at 08:19
  • Yeah, I just extended the line, changed the refX to match the line, changed markerUnits to userSpaceOnUse and now I am able to drag using marker. It is not actually marker which is been dragged but the extended line. Works well on zooming and resizing. Thanks for the info. – Nimesh Jain Oct 28 '16 at 08:27

0 Answers0