Good evening! Now I will try to explain my problem. I have an SVG code like this:

<!--?xml version="1.0" encoding="UTF-8" standalone="no"?--> <svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="93mm" height="53mm"> <color-profile name="acmecmyk" href="http://printers.example.com/acmecorp/model1234"></color-profile> <rect x="0" y="0" width="93mm" height="53mm" stroke="black" stroke-width="2px" fill="white"></rect> <g id="square"> <rect x="0" y="0" width="100" height="100" fill="blue" stroke="red" stroke-width="5px" rx="8" ry="8" id="myRect" class="chart"></rect> </g> <use href="#square" transform="scale(2)"></use> <text x="20" y="55" font-family="Verdana" font-size="43pt" id="hello">Hello World!</text> <text x="100" y="100" font-family="Arial" font-size="25px" fill="#FF0000">Кукарамба</text> </svg>

The challenge is that any items drawn on the SVG canvas can be moved using the mouse. I found a similar solution in JavaScript - HERE , but I want to implement on jQuery. Help, if it is not difficult for you. And another question - is it necessary to wrap the JavaScript or jQuery code in CDATA?

  • maybe you should use the tools for the intended purpose: Raphael.js made specifically to simplify work with SVG, and leave jQuery with DOM manipulations - Specter
  • I would love to, but there is one thing but! Deadlines are running out, and the Raphael.js library still needs to be sorted out. - spoil
  • Can you convert your comment in response? I will accept him as the best. - spoil

3 answers 3

Basic example from the Element.drag documentation

 (function (r) { var x, y; r.circle(15, 15, 10).attr(fill).drag(function (dx, dy) { this.attr({ cx: Math.min(Math.max(x + dx, 15), 85), cy: Math.min(Math.max(y + dy, 15), 85) }); }, function () { x = this.attr("cx"); y = this.attr("cy"); }); })(prepare("Element.drag-extra"));

    You can also connect code from an external file: <script xlink: href = "test.js"> </ script>

      An article about manipulating the attributes of SVG elements using jQuery: http://svgmnemo.ru/pub/svgdyn.html