Rag Doll

本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议，欢迎转载、或重新修改使用，但需要注明来源。 [署名 4.0 国际 (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/deed.zh) 本文作者: 苏洋创建时间: 2012年03月04日统计字数: 3028字阅读时间: 7分钟阅读本文链接: https://soulteary.com/2012/03/04/svgvml%E6%B5%8B%E8%AF%95.html ----- # SVG+VML 测试 [![2011061813473885](https://attachment.soulteary.com/2012/03/04/2011061813473885.png "2011061813473885")](https://attachment.soulteary.com/2012/03/04/2011061813473885.png) [原文出处.](http://soulteary.com/redirect?url=http%3A%2F%2Fwww.cnblogs.com%2Fhongru%2Farchive%2F2011%2F06%2F18%2F2084215.html&key=e8a3ae47e9dafeebf0706b543f9351f2) 半年前看过国外一个大牛的一个demo，然后自己用他的思路写了一个类似的东西。加了点额外的功能。当时主要是为了学习svg的部分api，做着玩。 ``` Rag Doll

Rag Doll

里面有做svg和vml的兼容，所以ie6.0+也ok的，但是效率还是很慢。（画直线，折线，和椭圆）右上角控制栏里的 “shake”和各种参数都可以点下试试看。

/* ========== for svg and vml compatible ========== */
var __SVG = false;
var __svgNS = false;
if (document.createElementNS) {
    __svgNS = "http://www.w3.org/2000/svg";
    __svg = document.createElementNS(__svgNS, "svg");
    __SVG = (__svg.x != null);
}
if (__SVG) {
    /* ============= SVG ============== */
    vectorGraphics = function(o, antialias) {
        this.canvas = document.createElementNS(__svgNS, "svg");
        this.canvas.style.position = "absolute";
        o.appendChild(this.canvas);
        this.createLine = function(w, col, linecap) {
            var o = document.createElementNS(__svgNS, "line");
            o.setAttribute("shape-rendering", antialias?"auto":"optimizeSpeed");
            o.setAttribute("stroke-width", Math.round(w)+"px");
            if (col) o.setAttribute("stroke", col);
            if (linecap) o.setAttribute("stroke-linecap", linecap);
            o.move = function(x1, y1, x2, y2) {
                this.setAttribute("x1", Math.round(x1) + .5);
                this.setAttribute("y1", Math.round(y1));
                this.setAttribute("x2", Math.round(x2));
                this.setAttribute("y2", Math.round(y2));
            }
            o.color = function(c){ this.setAttribute("stroke", c); }
            o.RGBcolor = function(R, G, B){ this.setAttribute("stroke", "rgb("+Math.round(R)+","+Math.round(G)+","+Math.round(B)+")"); }
            o.stroke_weight = function(s){ this.setAttribute("stroke-width", Math.round(s)+"px"); }
            this.canvas.appendChild(o);
            return o;
        }
        this.createPolyline = function(w, points, col, fill) {
            var o = document.createElementNS(__svgNS, "polyline");
            o.setAttribute("shape-rendering", antialias?"auto":"optimizeSpeed");
            o.setAttribute("stroke-width", Math.round(w));
            if (col) o.setAttribute("stroke", col);
            o.setAttribute("fill", fill?fill:"none");
            if (points) o.setAttribute("points", points);
            o.move = function(points) {
                this.setAttribute("points", points);
            }
            this.canvas.appendChild(o);
            return o;
        }
        this.createOval = function(diam, filled) {
            var o = document.createElementNS(__svgNS, "circle");
            o.setAttribute("shape-rendering", antialias?"auto":"optimizeSpeed");
            o.setAttribute("stroke-width", 0);
            o.setAttribute("r", Math.round(diam / 2));
            o.style.cursor = "pointer";
            o.move = function(x1, y1, radius) {
                this.setAttribute("cx", Math.round(x1));
                this.setAttribute("cy", Math.round(y1));
                this.setAttribute("r", Math.round(radius));
            }
            o.stroke_color = function(col) { this.setAttribute("stroke", col); }
            o.fill_color = function(col) { this.setAttribute("fill", col); }
            o.stroke_weight = function(sw) { this.setAttribute("stroke-width", sw); }
            this.canvas.appendChild(o);
            return o;
        }
    }
     
} else if (document.createStyleSheet) {
    /* ============= VML ============== */
    vectorGraphics = function(o, antialias) {
        document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
        var style = document.createStyleSheet();
        var VMLel = ['line','stroke','polyline','fill','oval'];
        for (var i=0,l=VMLel.length;i













```

在做浏览器适配的时候，某些情况下不得不考虑ie低版本的兼容时，其实svg+vml在矢量图方面算个不错的选择。

利用上面的直线和圆，其实就可以做个时钟了。: )