dojox/gfx/svg.js

  • Provides:

    • dojox.gfx.svg
  • Requires:

    • dojox.gfx._base in common
    • dojox.gfx.shape in common
    • dojox.gfx.path in common
  • dojox.gfx.svg.Group

    • type
      Function
    • chains:
      • svg.Shape: (prototype)
      • svg.Shape: (call)
      • gs.Container._init: (call)
    • summary
      a group shape (SVG), which can be used
      to logically group shapes (e.g, to propagate matricies)
    • source: [view]
         gs.Container._init.call(this);
  • dojox.gfx.svg.Group.setRawNode

    • type
      Function
    • parameters:
      • rawNode: (typeof Node)
        an SVG node
    • source: [view]
         this.rawNode = rawNode;
    • summary
      sets a raw SVG node to be used by this shape
  • dojox.gfx.svg.Group.rawNode

    • summary
  • dojox.gfx.svg.Group.setRawNode.rawNode

    • type
      Node
    • summary
      an SVG node
  • dojox.gfx.svg.Rect

    • type
      Function
    • chains:
      • svg.Shape: (prototype)
      • svg.Shape: (call)
      • gs.Rect: (call)
    • mixins:
      • gs.Rect.prototype: (prototype)
    • summary
      a rectangle shape (SVG)
  • dojox.gfx.svg.Rect.setShape

    • type
      Function
    • parameters:
      • newShape: (typeof Object)
        a rectangle shape object
    • source: [view]
         this.shape = g.makeParameters(this.shape, newShape);
         this.bbox = null;
         for(var i in this.shape){
          if(i != "type" && i != "r"){
           this.rawNode.setAttribute(i, this.shape[i]);
          }
         }
         if(this.shape.r){
          this.rawNode.setAttribute("ry", this.shape.r);
          this.rawNode.setAttribute("rx", this.shape.r);
         }
         return this; // self
    • summary
      sets a rectangle shape object (SVG)
    • returns
      self
  • dojox.gfx.svg.Rect.shape

    • summary
  • dojox.gfx.svg.Rect.bbox

    • summary
  • dojox.gfx.svg.Ellipse

    • type
      Function
    • chains:
      • svg.Shape: (prototype)
      • svg.Shape: (call)
      • gs.Ellipse: (call)
    • mixins:
      • gs.Ellipse.prototype: (prototype)
    • summary
  • dojox.gfx.svg.Circle

    • type
      Function
    • chains:
      • svg.Shape: (prototype)
      • svg.Shape: (call)
      • gs.Circle: (call)
    • mixins:
      • gs.Circle.prototype: (prototype)
    • summary
  • dojox.gfx.svg.Line

    • type
      Function
    • chains:
      • svg.Shape: (prototype)
      • svg.Shape: (call)
      • gs.Line: (call)
    • mixins:
      • gs.Line.prototype: (prototype)
    • summary
  • dojox.gfx.svg.Polyline

    • type
      Function
    • chains:
      • svg.Shape: (prototype)
      • svg.Shape: (call)
      • gs.Polyline: (call)
    • mixins:
      • gs.Polyline.prototype: (prototype)
    • summary
      a polyline/polygon shape (SVG)
  • dojox.gfx.svg.Polyline.setShape

    • type
      Function
    • parameters:
      • points: (typeof Object)
        a polyline/polygon shape object
      • closed: (typeof )
    • source: [view]
         if(points && points instanceof Array){
          // branch
          // points: Array: an array of points
          this.shape = g.makeParameters(this.shape, { points: points });
          if(closed && this.shape.points.length){
           this.shape.points.push(this.shape.points[0]);
          }
         }else{
          this.shape = g.makeParameters(this.shape, points);
         }
         this.bbox = null;
         this._normalizePoints();
         var attr = [], p = this.shape.points;
         for(var i = 0; i < p.length; ++i){
          attr.push(p[i].x.toFixed(8), p[i].y.toFixed(8));
         }
         this.rawNode.setAttribute("points", attr.join(" "));
         return this; // self
    • summary
      sets a polyline/polygon shape object (SVG)
    • returns
      self
  • dojox.gfx.svg.Polyline.shape

    • summary
  • dojox.gfx.svg.Polyline.bbox

    • summary
  • dojox.gfx.svg.Image

    • type
      Function
    • chains:
      • svg.Shape: (prototype)
      • svg.Shape: (call)
      • gs.Image: (call)
    • mixins:
      • gs.Image.prototype: (prototype)
    • summary
      an image (SVG)
  • dojox.gfx.svg.Image.setShape

    • type
      Function
    • parameters:
      • newShape: (typeof Object)
        an image shape object
    • source: [view]
         this.shape = g.makeParameters(this.shape, newShape);
         this.bbox = null;
         var rawNode = this.rawNode;
         for(var i in this.shape){
          if(i != "type" && i != "src"){
           rawNode.setAttribute(i, this.shape[i]);
          }
         }
         rawNode.setAttribute("preserveAspectRatio", "none");
         rawNode.setAttributeNS(svg.xmlns.xlink, "xlink:href", this.shape.src);
         return this; // self
    • summary
      sets an image shape object (SVG)
    • returns
      self
  • dojox.gfx.svg.Image.shape

    • summary
  • dojox.gfx.svg.Image.bbox

    • summary
  • dojox.gfx.svg.Text

    • type
      Function
    • chains:
      • svg.Shape: (prototype)
      • svg.Shape: (call)
      • gs.Text: (call)
    • mixins:
      • gs.Text.prototype: (prototype)
    • summary
      an anchored text (SVG)
  • dojox.gfx.svg.Text.setShape

    • type
      Function
    • parameters:
      • newShape: (typeof Object)
        a text shape object
    • source: [view]
         this.shape = g.makeParameters(this.shape, newShape);
         this.bbox = null;
         var r = this.rawNode, s = this.shape;
         r.setAttribute("x", s.x);
         r.setAttribute("y", s.y);
         r.setAttribute("text-anchor", s.align);
         r.setAttribute("text-decoration", s.decoration);
         r.setAttribute("rotate", s.rotated ? 90 : 0);
         r.setAttribute("kerning", s.kerning ? "auto" : 0);
         r.setAttribute("text-rendering", "optimizeLegibility");

         
         // update the text content
         if(r.firstChild){
          r.firstChild.nodeValue = s.text;
         }else{
          r.appendChild(_createTextNode(s.text));
         }
         return this; // self
    • summary
      sets a text shape object (SVG)
    • returns
      self
  • dojox.gfx.svg.Text.getTextWidth

    • type
      Function
    • source: [view]
         var rawNode = this.rawNode,
          oldParent = rawNode.parentNode,
          _measurementNode = rawNode.cloneNode(true);
         _measurementNode.style.visibility = "hidden";


         // solution to the "orphan issue" in FF
         var _width = 0, _text = _measurementNode.firstChild.nodeValue;
         oldParent.appendChild(_measurementNode);


         // solution to the "orphan issue" in Opera
         // (nodeValue == "" hangs firefox)
         if(_text!=""){
          while(!_width){
      //Yang: work around svgweb bug 417 -- http://code.google.com/p/svgweb/issues/detail?id=417
      if (_measurementNode.getBBox)
           _width = parseInt(_measurementNode.getBBox().width);
      else
       _width = 68;
          }
         }
         oldParent.removeChild(_measurementNode);
         return _width;
    • summary
      get the text width in pixels
  • dojox.gfx.svg.Text.shape

    • summary
  • dojox.gfx.svg.Text.bbox

    • summary
  • dojox.gfx.svg.Path

    • type
      Function
    • chains:
      • svg.Shape: (prototype)
      • svg.Shape: (call)
      • g.path.Path: (call)
    • mixins:
      • g.path.Path.prototype: (prototype)
    • summary
      a path shape (SVG)
  • dojox.gfx.svg.Path._updateWithSegment

    • type
      Function
    • parameters:
      • segment: (typeof Object)
        a segment
    • source: [view]
         this.inherited(arguments);
         if(typeof(this.shape.path) == "string"){
          this.rawNode.setAttribute("d", this.shape.path);
         }
    • summary
      updates the bounding box of path with new segment
  • dojox.gfx.svg.Path.setShape

    • type
      Function
    • parameters:
      • newShape: (typeof Object)
        an SVG path string or a path object (see dojox.gfx.defaultPath)
    • source: [view]
         this.inherited(arguments);
         if(this.shape.path){
          this.rawNode.setAttribute("d", this.shape.path);
         }else{
          this.rawNode.removeAttribute("d");
         }
         return this; // self
    • summary
      forms a path using a shape (SVG)
    • returns
      self
  • dojox.gfx.svg.TextPath

    • type
      Function
    • chains:
      • svg.Shape: (prototype)
      • svg.Shape: (call)
      • g.path.TextPath: (call)
    • mixins:
      • g.path.TextPath.prototype: (prototype)
    • summary
      a textpath shape (SVG)
  • dojox.gfx.svg.TextPath._updateWithSegment

    • type
      Function
    • parameters:
      • segment: (typeof Object)
        a segment
    • source: [view]
         this.inherited(arguments);
         this._setTextPath();
    • summary
      updates the bounding box of path with new segment
  • dojox.gfx.svg.TextPath.setShape

    • type
      Function
    • parameters:
      • newShape: (typeof Object)
        an SVG path string or a path object (see dojox.gfx.defaultPath)
    • source: [view]
         this.inherited(arguments);
         this._setTextPath();
         return this; // self
    • summary
      forms a path using a shape (SVG)
    • returns
      self
  • dojox.gfx.svg.TextPath._setTextPath

    • type
      Function
    • source: [view]
         if(typeof this.shape.path != "string"){ return; }
         var r = this.rawNode;
         if(!r.firstChild){
          var tp = _createElementNS(svg.xmlns.svg, "textPath"),
           tx = _createTextNode("");
          tp.appendChild(tx);
          r.appendChild(tp);
         }
         var ref = r.firstChild.getAttributeNS(svg.xmlns.xlink, "href"),
          path = ref && svg.getRef(ref);
         if(!path){
          var surface = this._getParentSurface();
          if(surface){
           var defs = surface.defNode;
           path = _createElementNS(svg.xmlns.svg, "path");
           var id = g._base._getUniqueId();
           path.setAttribute("id", id);
           defs.appendChild(path);
           r.firstChild.setAttributeNS(svg.xmlns.xlink, "xlink:href", "#" + id);
          }
         }
         if(path){
          path.setAttribute("d", this.shape.path);
         }
    • summary
  • dojox.gfx.svg.TextPath._setText

    • type
      Function
    • source: [view]
         var r = this.rawNode;
         if(!r.firstChild){
          var tp = _createElementNS(svg.xmlns.svg, "textPath"),
           tx = _createTextNode("");
          tp.appendChild(tx);
          r.appendChild(tp);
         }
         r = r.firstChild;
         var t = this.text;
         r.setAttribute("alignment-baseline", "middle");
         switch(t.align){
          case "middle":
           r.setAttribute("text-anchor", "middle");
           r.setAttribute("startOffset", "50%");
           break;
          case "end":
           r.setAttribute("text-anchor", "end");
           r.setAttribute("startOffset", "100%");
           break;
          default:
           r.setAttribute("text-anchor", "start");
           r.setAttribute("startOffset", "0%");
           break;
         }
         //r.parentNode.setAttribute("alignment-baseline", "central");
         //r.setAttribute("dominant-baseline", "central");
         r.setAttribute("baseline-shift", "0.5ex");
         r.setAttribute("text-decoration", t.decoration);
         r.setAttribute("rotate", t.rotated ? 90 : 0);
         r.setAttribute("kerning", t.kerning ? "auto" : 0);
         r.firstChild.data = t.text;
    • summary
  • dojox.gfx.svg.Surface

    • type
      Function
    • chains:
      • gs.Surface: (prototype)
      • gs.Surface: (call)
      • gs.Container._init: (call)
    • summary
      a surface object to be used for drawings (SVG)
    • source: [view]
         gs.Container._init.call(this);
  • dojox.gfx.svg.Surface.destroy

    • type
      Function
    • source: [view]
         this.defNode = null; // release the external reference
         this.inherited(arguments);
    • summary
  • dojox.gfx.svg.Surface.setDimensions

    • type
      Function
    • parameters:
      • width: (typeof String)
        width of surface, e.g., &quot;100px&quot;
      • height: (typeof String)
        height of surface, e.g., &quot;100px&quot;
    • source: [view]
         if(!this.rawNode){ return this; }
         this.rawNode.setAttribute("width", width);
         this.rawNode.setAttribute("height", height);
         return this; // self
    • summary
      sets the width and height of the rawNode
    • returns
      self
  • dojox.gfx.svg.Surface.getDimensions

    • type
      Function
    • source: [view]
         var t = this.rawNode ? {
          width: g.normalizedLength(this.rawNode.getAttribute("width")),
          height: g.normalizedLength(this.rawNode.getAttribute("height"))} : null;
         return t; // Object
    • summary
      returns an object with properties &quot;width&quot; and &quot;height&quot;
    • returns
      Object
  • dojox.gfx.svg.Surface.defNode

    • summary
  • dojox.gfx.svg.Shape

    • type
      Function
    • chains:
      • gs.Shape: (prototype)
      • gs.Shape: (call)
    • summary
      SVG-specific implementation of dojox.gfx.Shape methods
  • dojox.gfx.svg.Shape.setFill

    • type
      Function
    • parameters:
      • fill: (typeof Object)
        a fill object
        (see dojox.gfx.defaultLinearGradient,
        dojox.gfx.defaultRadialGradient,
        dojox.gfx.defaultPattern,
        or dojo.Color)
    • source: [view]
         if(!fill){
          // don't fill
          this.fillStyle = null;
          this.rawNode.setAttribute("fill", "none");
          this.rawNode.setAttribute("fill-opacity", 0);
          return this;
         }
         var f;
         // FIXME: slightly magical. We're using the outer scope's "f", but setting it later
         var setter = function(x){
           // we assume that we're executing in the scope of the node to mutate
           this.setAttribute(x, f[x].toFixed(8));
          };
         if(typeof(fill) == "object" && "type" in fill){
          // gradient
          switch(fill.type){
           case "linear":
            f = g.makeParameters(g.defaultLinearGradient, fill);
            var gradient = this._setFillObject(f, "linearGradient");
            d.forEach(["x1", "y1", "x2", "y2"], setter, gradient);
            break;
           case "radial":
            f = g.makeParameters(g.defaultRadialGradient, fill);
            var gradient = this._setFillObject(f, "radialGradient");
            d.forEach(["cx", "cy", "r"], setter, gradient);
            break;
           case "pattern":
            f = g.makeParameters(g.defaultPattern, fill);
            var pattern = this._setFillObject(f, "pattern");
            d.forEach(["x", "y", "width", "height"], setter, pattern);
            break;
          }
          this.fillStyle = f;
          return this;
         }
         // color object
         var f = g.normalizeColor(fill);
         this.fillStyle = f;
         this.rawNode.setAttribute("fill", f.toCss());
         this.rawNode.setAttribute("fill-opacity", f.a);
         this.rawNode.setAttribute("fill-rule", "evenodd");
         return this; // self
    • summary
      sets a fill object (SVG)
    • returns
      self
  • dojox.gfx.svg.Shape.setStroke

    • type
      Function
    • parameters:
      • stroke: (typeof Object)
        a stroke object (see dojox.gfx.defaultStroke)
    • source: [view]
         var rn = this.rawNode;
         if(!stroke){
          // don't stroke
          this.strokeStyle = null;
          rn.setAttribute("stroke", "none");
          rn.setAttribute("stroke-opacity", 0);
          return this;
         }
         // normalize the stroke
         if(typeof stroke == "string" || d.isArray(stroke) || stroke instanceof d.Color){
          stroke = { color: stroke };
         }
         var s = this.strokeStyle = g.makeParameters(g.defaultStroke, stroke);
         s.color = g.normalizeColor(s.color);
         // generate attributes
         if(s){
          rn.setAttribute("stroke", s.color.toCss());
          rn.setAttribute("stroke-opacity", s.color.a);
          rn.setAttribute("stroke-width", s.width);
          rn.setAttribute("stroke-linecap", s.cap);
          if(typeof s.join == "number"){
           rn.setAttribute("stroke-linejoin", "miter");
           rn.setAttribute("stroke-miterlimit", s.join);
          }else{
           rn.setAttribute("stroke-linejoin", s.join);
          }
          var da = s.style.toLowerCase();
          if(da in svg.dasharray){
           da = svg.dasharray[da];
          }
          if(da instanceof Array){
           da = d._toArray(da);
           for(var i = 0; i < da.length; ++i){
            da[i] *= s.width;
           }
           if(s.cap != "butt"){
            for(var i = 0; i < da.length; i += 2){
             da[i] -= s.width;
             if(da[i] < 1){ da[i] = 1; }
            }
            for(var i = 1; i < da.length; i += 2){
             da[i] += s.width;
            }
           }
           da = da.join(",");
          }
          rn.setAttribute("stroke-dasharray", da);
          rn.setAttribute("dojoGfxStrokeStyle", s.style);
         }
         return this; // self
    • summary
      sets a stroke object (SVG)
    • returns
      self
  • dojox.gfx.svg.Shape._getParentSurface

    • type
      Function
    • source: [view]
         var surface = this.parent;
         for(; surface && !(surface instanceof g.Surface); surface = surface.parent);
         return surface;
    • summary
  • dojox.gfx.svg.Shape._setFillObject

    • type
      Function
    • parameters:
      • f: (typeof )
      • nodeType: (typeof )
    • source: [view]
         var svgns = svg.xmlns.svg;
         this.fillStyle = f;
         var surface = this._getParentSurface(),
          defs = surface.defNode,
          fill = this.rawNode.getAttribute("fill"),
          ref = svg.getRef(fill);
         if(ref){
          fill = ref;
          if(fill.tagName.toLowerCase() != nodeType.toLowerCase()){
           var id = fill.id;
           fill.parentNode.removeChild(fill);
           fill = _createElementNS(svgns, nodeType);
           fill.setAttribute("id", id);
           defs.appendChild(fill);
          }else{
           while(fill.childNodes.length){
            fill.removeChild(fill.lastChild);
           }
          }
         }else{
          fill = _createElementNS(svgns, nodeType);
          fill.setAttribute("id", g._base._getUniqueId());
          defs.appendChild(fill);
         }
         if(nodeType == "pattern"){
          fill.setAttribute("patternUnits", "userSpaceOnUse");
          var img = _createElementNS(svgns, "image");
          img.setAttribute("x", 0);
          img.setAttribute("y", 0);
          img.setAttribute("width", f.width .toFixed(8));
          img.setAttribute("height", f.height.toFixed(8));
          img.setAttributeNS(svg.xmlns.xlink, "xlink:href", f.src);
          fill.appendChild(img);
         }else{
          fill.setAttribute("gradientUnits", "userSpaceOnUse");
          for(var i = 0; i < f.colors.length; ++i){
           var c = f.colors[i], t = _createElementNS(svgns, "stop"),
            cc = c.color = g.normalizeColor(c.color);
           t.setAttribute("offset", c.offset.toFixed(8));
           t.setAttribute("stop-color", cc.toCss());
           t.setAttribute("stop-opacity", cc.a);
           fill.appendChild(t);
          }
         }
         this.rawNode.setAttribute("fill", "url(#" + fill.getAttribute("id") +")");
         this.rawNode.removeAttribute("fill-opacity");
         this.rawNode.setAttribute("fill-rule", "evenodd");
         return fill;
    • summary
  • dojox.gfx.svg.Shape._applyTransform

    • type
      Function
    • source: [view]
         var matrix = this.matrix;
         if(matrix){
          var tm = this.matrix;
          this.rawNode.setAttribute("transform", "matrix(" +
           tm.xx.toFixed(8) + "," + tm.yx.toFixed(8) + "," +
           tm.xy.toFixed(8) + "," + tm.yy.toFixed(8) + "," +
           tm.dx.toFixed(8) + "," + tm.dy.toFixed(8) + ")");
         }else{
          this.rawNode.removeAttribute("transform");
         }
         return this;
    • summary
  • dojox.gfx.svg.Shape.setRawNode

    • type
      Function
    • parameters:
      • rawNode: (typeof )
    • source: [view]
         var r = this.rawNode = rawNode;
         if(this.shape.type!="image"){
          r.setAttribute("fill", "none");
         }
         r.setAttribute("fill-opacity", 0);
         r.setAttribute("stroke", "none");
         r.setAttribute("stroke-opacity", 0);
         r.setAttribute("stroke-width", 1);
         r.setAttribute("stroke-linecap", "butt");
         r.setAttribute("stroke-linejoin", "miter");
         r.setAttribute("stroke-miterlimit", 4);
    • summary
      assigns and clears the underlying node that will represent this
      shape. Once set, transforms, gradients, etc, can be applied.
      (no fill &amp; stroke by default)
  • dojox.gfx.svg.Shape.setShape

    • type
      Function
    • parameters:
      • newShape: (typeof Object)
        a shape object
        (see dojox.gfx.defaultPath,
        dojox.gfx.defaultPolyline,
        dojox.gfx.defaultRect,
        dojox.gfx.defaultEllipse,
        dojox.gfx.defaultCircle,
        dojox.gfx.defaultLine,
        or dojox.gfx.defaultImage)
    • source: [view]
         this.shape = g.makeParameters(this.shape, newShape);
         for(var i in this.shape){
          if(i != "type"){
           this.rawNode.setAttribute(i, this.shape[i]);
          }
         }
         this.bbox = null;
         return this; // self
    • summary
      sets a shape object (SVG)
    • returns
      self
  • dojox.gfx.svg.Shape._moveToFront

    • type
      Function
    • source: [view]
         this.rawNode.parentNode.appendChild(this.rawNode);
         return this; // self
    • summary
      moves a shape to front of its parent's list of shapes (SVG)
    • returns
      self
  • dojox.gfx.svg.Shape._moveToBack

    • type
      Function
    • source: [view]
         this.rawNode.parentNode.insertBefore(this.rawNode, this.rawNode.parentNode.firstChild);
         return this; // self
    • summary
      moves a shape to back of its parent's list of shapes (SVG)
    • returns
      self
  • dojox.gfx.svg.Shape.fillStyle

    • summary
  • dojox.gfx.svg.Shape.strokeStyle

    • summary
  • dojox.gfx.svg.Shape.rawNode

    • summary
  • dojox.gfx.svg.Shape.shape

    • summary
  • dojox.gfx.svg.Shape.bbox

    • summary
  • svg.useSvgWeb

    • summary
  • svg.xmlns

    • summary
  • svg.getRef

    • summary
  • svg.dasharray

    • summary
  • svg.Group.nodeType

    • summary
  • svg.Rect.nodeType

    • summary
  • svg.Ellipse.nodeType

    • summary
  • svg.Circle.nodeType

    • summary
  • svg.Line.nodeType

    • summary
  • svg.Polyline.nodeType

    • summary
  • svg.Image.nodeType

    • summary
  • svg.Text.nodeType

    • summary
  • svg.Path.nodeType

    • summary
  • svg.TextPath.nodeType

    • summary
  • svg.createSurface

    • summary
  • .Shape

    • mixins:
      • _eventsProcessing: (prototype)
    • summary
  • .Surface

    • mixins:
      • _eventsProcessing: (prototype)
    • summary
  • dojox.gfx.svg

    • type
      Object
    • summary
  • dojox.gfx

    • type
      Object
    • summary
  • dojox

    • type
      Object
    • summary