svg-test1.html 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <!doctype html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6. <a href="#">CLICK THIS</a>
  7. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  8. <script type="text/javascript">
  9. $(function() {
  10. $("a").bind("click", function() {
  11. $("#path1").attr("d", "M935.9999847412109,150C945.9999847412109,0,0,291.8000030517578,10,141.8000030517578");
  12. });
  13. var ns = {
  14. svg:"http://www.w3.org/2000/svg",
  15. xhtml:"http://www.w3.org/1999/xhtml"
  16. };
  17. var svgNode = function(name, attributes) {
  18. var n = document.createElementNS(ns.svg, name);
  19. attributes = attributes || {};
  20. attributes["version"] = "1.1";
  21. attributes["xmnls"] = ns.xhtml;
  22. for (var i in attributes) {
  23. n.setAttribute(i, "" + attributes[i]);
  24. }
  25. return n;
  26. };
  27. var s = svgNode("svg", {
  28. height:700,
  29. width:645
  30. });
  31. s.appendChild(svgNode("path", {
  32. d:"M635.9999847412109,150C645.9999847412109,0,0,291.8000030517578,10,141.8000030517578",
  33. "stroke-width":15,
  34. "stroke":"blue",
  35. "fill":"none",
  36. id:"path1"
  37. }));
  38. s.appendChild(svgNode("path", {
  39. d:"M235.9999847412109,150L550,500",
  40. "stroke-width":15,
  41. "stroke":"red",
  42. "fill":"none",
  43. id:"path2"
  44. }));
  45. document.body.appendChild(s);
  46. });
  47. </script>
  48. </body>
  49. </html>