vml-test1.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
  1. <!doctype html>
  2. <html xmlns:vml="urn:schemas-microsoft-com:vml">
  3. <head>
  4. <style>vml\: * { behavior:url(#default#VML); display:inline-block }</style>
  5. </head>
  6. <body>
  7. <a href="#">CLICK THIS</a>
  8. <vml:oval style="width:100pt;height:50pt" fillcolor="red">
  9. </vml:oval>
  10. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  11. <script type="text/javascript">
  12. $(function() {
  13. var createNode;
  14. //document.createStyleSheet().addRule(".vml", "behavior:url(#default#VML)");
  15. try {
  16. !document.namespaces.jvml && document.namespaces.add("vml", "urn:schemas-microsoft-com:vml");
  17. createNode = function (tagName) {
  18. return document.createElement("<vml:" + tagName + " class=\"vml\">");
  19. };
  20. } catch (e) {
  21. createNode = function (tagName) {
  22. return document.createElement("<" + tagName + " xmlns=\"urn:schemas-microsoft.com:vml\" class=\"vml\">");
  23. };
  24. }
  25. var renderMode = (window.SVGAngle || document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") ? "SVG" : "VML");
  26. var path = function (pathString, vml) {
  27. /* var g = createNode("group");
  28. g.style.cssText = "position:absolute;left:0;top:0;width:500px;height:500px";
  29. g.setAttribute("coordsize", "100,100");*/
  30. //g.coordorigin = vml.coordorigin;
  31. var el = createNode("shape"), ol = el.style;
  32. ol.width = "500px";
  33. ol.height = "500px";
  34. el.setAttribute("coordsize","100,100");
  35. // el.coordorigin = vml.coordorigin;
  36. el.setAttribute("fill", "false");
  37. el.setAttribute("stroke", "true");
  38. el.setAttribute("path", pathString);
  39. el.setAttribute("strokecolor", "#646464");
  40. el.setAttribute("strokeweight","12.75pt");
  41. //<g_vml_:stroke opacity = "50" miterlimit = "10" joinstyle = "miter" endcap = "flat"></g_vml_:stroke>
  42. var sel = createNode("stroke");
  43. sel.setAttribute("opacity", "50");
  44. sel.setAttribute("miterlimit", "10");
  45. sel.setAttribute("joinstyle", "miter");
  46. sel.setAttribute("endcap", "flat");
  47. el.appendChild(sel);
  48. vml.appendChild(el);
  49. // g[appendChild](el);
  50. /* var p = new Element(el, g, vml),
  51. attr = {fill: "none", stroke: "#000"};
  52. pathString && (attr.path = pathString);
  53. p.type = "path";
  54. p.path = [];
  55. p.Path = E;
  56. // setFillAndStroke(p, attr); */
  57. /* var stroke = createNode("stroke");
  58. stroke.setAttribute("opacity", "50");
  59. stroke.setAttribute("miterlimit", "10");
  60. stroke.setAttribute("joinstyle", "miter");
  61. stroke.setAttribute("endcap", "flat");*/
  62. // vml.canvas[appendChild](g);
  63. // return p;
  64. };
  65. /*
  66. var v = document.createElement("div");
  67. v.style.width = "500px";v.style.height = "500px";
  68. $(v).css("border", "1px solid red");
  69. document.body.appendChild(v);
  70. //path(" m5733,1495 c5833,-5,-5,3175,95,1675 e", v);
  71. path("m935.9999847412109,150 c945.9999847412109,0,0,291.8000030517578,10,141.8000030517578 e", v);
  72. */
  73. /*
  74. <g_vml_:shape style="POSITION: absolute; WIDTH: 10px; HEIGHT: 10px" coordsize = "100,100" filled = "f" stroked = "t" strokecolor = "#646464" strokeweight = "12.75pt" path = " m5733,1495 c5833,-5,-5,3175,95,1675 e">
  75. <g_vml_:stroke opacity = "50" miterlimit = "10" joinstyle = "miter" endcap = "flat"></g_vml_:stroke>
  76. </g_vml_:shape>
  77. */
  78. /*
  79. $("a").bind("click", function() {
  80. $("#path1").attr("d", "M935.9999847412109,150C945.9999847412109,0,0,291.8000030517578,10,141.8000030517578");
  81. });
  82. var ns = {
  83. svg:"http://www.w3.org/2000/svg",
  84. xhtml:"http://www.w3.org/1999/xhtml"
  85. };
  86. <g_vml_:shape style="POSITION: absolute; WIDTH: 10px; HEIGHT: 10px" coordsize = "100,100" filled = "f" stroked = "t" strokecolor = "#646464" strokeweight = "12.75pt" path = " m5733,1495 c5833,-5,-5,3175,95,1675 e">
  87. <g_vml_:stroke opacity = "50" miterlimit = "10" joinstyle = "miter" endcap = "flat"></g_vml_:stroke>
  88. </g_vml_:shape>
  89. var vmlNode = function(name, attributes) {
  90. var n = document.createElementNS(ns.svg, name);
  91. attributes = attributes || {};
  92. attributes["version"] = "1.1";
  93. attributes["xmnls"] = ns.xhtml;
  94. for (var i in attributes) {
  95. n.setAttribute(i, "" + attributes[i]);
  96. }
  97. return n;
  98. };
  99. var s = svgNode("svg", {
  100. height:700,
  101. width:645
  102. });
  103. s.appendChild(svgNode("path", {
  104. d:"M635.9999847412109,150C645.9999847412109,0,0,291.8000030517578,10,141.8000030517578",
  105. "stroke-width":15,
  106. "stroke":"blue",
  107. "fill":"none",
  108. id:"path1"
  109. }));
  110. s.appendChild(svgNode("path", {
  111. d:"M235.9999847412109,150L550,500",
  112. "stroke-width":15,
  113. "stroke":"red",
  114. "fill":"none",
  115. id:"path2"
  116. }));
  117. document.body.appendChild(s);
  118. */
  119. });
  120. </script>
  121. </body>
  122. </html>