Как я могу сменить холст на svg?

Question

function BallItemRenderer() { 
    this.canvas = null; 
    this.graphics = this.canvas.getContext("2d"); 
this.stroke; 
this.fill; 
this.cubeDepth = 0; 
this.cubeAngleRatio = 0; 

this.draw = function(x, y, width, height) { 
     var g = this.graphics; 
     if(g) { 
      if(this.stroke && this.stroke.color) 
       g.strokeStyle = GraphicsUtils.color2rgba(this.stroke.color, this.stroke.alpha); 

      if(this.stroke && this.stroke.weight) 
       g.lineWidth = this.stroke.weight; 
      else 
       g.lineWidth = 1; 

      var rad = width * 0.5; 
      var tx = this.cubeAngleRatio * rad * 0.5; 
      var radgrad = g.createRadialGradient(x+rad-tx, y+rad-tx, 1, x+rad, y+rad, rad); 
      var alpha = isObject(this.fill) ? this.fill.alpha : 1; 
      radgrad.addColorStop(0, "rgba(255,255,255," + alpha + ")"); 
      radgrad.addColorStop(1, GraphicsUtils.adjustBrightness(this.fill, 0)); 
      g.fillStyle = radgrad; 
      g.beginPath(); 

      g.arc(x+rad, y+rad, rad, 0, Math.PI*2, true); 
      g.fill(); 
      if(this.stroke && this.stroke.weight) 
       g.stroke(); 
     } 
    } 
} 

Я пытаюсь сменить холст на svg. но мне так сложно. Этот источник работает для рендеринга элементов. Как я могу сменить холст на svg? пожалуйста, помогите .. потребность образец ..

Answer 1

Использование a circle element (example) и a radialGradient element (example). Вам нужно будет использовать DOM для создания и управления соответствующими элементами.