123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157 |
- <!doctype html>
- <html xmlns:vml="urn:schemas-microsoft-com:vml">
- <head>
- <style>vml\: * { behavior:url(#default#VML); display:inline-block }</style>
- </head>
- <body>
- <a href="#">CLICK THIS</a>
- <vml:oval style="width:100pt;height:50pt" fillcolor="red">
- </vml:oval>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
- <script type="text/javascript">
- $(function() {
- var createNode;
- //document.createStyleSheet().addRule(".vml", "behavior:url(#default#VML)");
- try {
- !document.namespaces.jvml && document.namespaces.add("vml", "urn:schemas-microsoft-com:vml");
- createNode = function (tagName) {
- return document.createElement("<vml:" + tagName + " class=\"vml\">");
- };
- } catch (e) {
- createNode = function (tagName) {
- return document.createElement("<" + tagName + " xmlns=\"urn:schemas-microsoft.com:vml\" class=\"vml\">");
- };
- }
- var renderMode = (window.SVGAngle || document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") ? "SVG" : "VML");
- var path = function (pathString, vml) {
- /* var g = createNode("group");
- g.style.cssText = "position:absolute;left:0;top:0;width:500px;height:500px";
- g.setAttribute("coordsize", "100,100");*/
- //g.coordorigin = vml.coordorigin;
- var el = createNode("shape"), ol = el.style;
- ol.width = "500px";
- ol.height = "500px";
- el.setAttribute("coordsize","100,100");
- // el.coordorigin = vml.coordorigin;
- el.setAttribute("fill", "false");
- el.setAttribute("stroke", "true");
- el.setAttribute("path", pathString);
- el.setAttribute("strokecolor", "#646464");
- el.setAttribute("strokeweight","12.75pt");
- //<g_vml_:stroke opacity = "50" miterlimit = "10" joinstyle = "miter" endcap = "flat"></g_vml_:stroke>
- var sel = createNode("stroke");
- sel.setAttribute("opacity", "50");
- sel.setAttribute("miterlimit", "10");
- sel.setAttribute("joinstyle", "miter");
- sel.setAttribute("endcap", "flat");
- el.appendChild(sel);
- vml.appendChild(el);
- // g[appendChild](el);
-
- /* var p = new Element(el, g, vml),
- attr = {fill: "none", stroke: "#000"};
- pathString && (attr.path = pathString);
- p.type = "path";
- p.path = [];
- p.Path = E;
- // setFillAndStroke(p, attr); */
-
- /* var stroke = createNode("stroke");
- stroke.setAttribute("opacity", "50");
- stroke.setAttribute("miterlimit", "10");
- stroke.setAttribute("joinstyle", "miter");
- stroke.setAttribute("endcap", "flat");*/
- // vml.canvas[appendChild](g);
- // return p;
- };
- /*
- var v = document.createElement("div");
- v.style.width = "500px";v.style.height = "500px";
- $(v).css("border", "1px solid red");
- document.body.appendChild(v);
- //path(" m5733,1495 c5833,-5,-5,3175,95,1675 e", v);
- path("m935.9999847412109,150 c945.9999847412109,0,0,291.8000030517578,10,141.8000030517578 e", v);
- */
- /*
- <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">
- <g_vml_:stroke opacity = "50" miterlimit = "10" joinstyle = "miter" endcap = "flat"></g_vml_:stroke>
- </g_vml_:shape>
- */
- /*
- $("a").bind("click", function() {
- $("#path1").attr("d", "M935.9999847412109,150C945.9999847412109,0,0,291.8000030517578,10,141.8000030517578");
- });
- var ns = {
- svg:"http://www.w3.org/2000/svg",
- xhtml:"http://www.w3.org/1999/xhtml"
- };
- <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">
- <g_vml_:stroke opacity = "50" miterlimit = "10" joinstyle = "miter" endcap = "flat"></g_vml_:stroke>
- </g_vml_:shape>
- var vmlNode = function(name, attributes) {
- var n = document.createElementNS(ns.svg, name);
- attributes = attributes || {};
- attributes["version"] = "1.1";
- attributes["xmnls"] = ns.xhtml;
- for (var i in attributes) {
- n.setAttribute(i, "" + attributes[i]);
- }
- return n;
- };
- var s = svgNode("svg", {
- height:700,
- width:645
- });
-
- s.appendChild(svgNode("path", {
- d:"M635.9999847412109,150C645.9999847412109,0,0,291.8000030517578,10,141.8000030517578",
- "stroke-width":15,
- "stroke":"blue",
- "fill":"none",
- id:"path1"
- }));
- s.appendChild(svgNode("path", {
- d:"M235.9999847412109,150L550,500",
- "stroke-width":15,
- "stroke":"red",
- "fill":"none",
- id:"path2"
- }));
- document.body.appendChild(s);
- */
- });
- </script>
-
- </body>
- </html>
|