(function(){
  'use strict';


  var ns = 'http://www.w3.org/2000/svg';

  var Area = function(){

    this.x = 55, this.y = 55;
    this.w = 400, this.h = 400;
    var ele = document.createElementNS(ns, 'svg:svg');
    ele.setAttribute('width', this.w);
    ele.setAttribute('height', this.h);
    this.ele = ele;
  }

  var Circle = function(){
    this.svg, this.circle;
    this.x = 60, this.y = 65;
    this.dx = 2, this.dy = 2;
    this.r = 20, this.d = 5, this.w = 400, this.h = 300;

    var ele = document.createElementNS(ns, 'svg:circle');
    this.ele = ele;
    this.$ = $(ele);
    this.$.attr({
cx : this.x,
cy : this.y,
r: 30,
fill: '#000',
    });
/*
    ele.setAttribute('cx', this.x);
    ele.setAttribute('cy', this.y);
    ele.setAttribute('r', '30');
    ele.setAttribute('stroke', '#333333');
    ele.setAttribute('stroke-width', '10');
    ele.setAttribute('fill', '#999999');
    ele.setAttribute('id', 'circle');
*/
  }

  Circle.prototype = {
    move : function(){
      this.x += this.dx;
      this.y += this.dy;
      if(this.x < this.r+this.d || this.x > this.w-(this.r+this.d)){
        this.dx = -this.dx;
      }
      if(this.y < this.r+this.d || this.y > this.h-(this.r+this.d)){
        this.dy = -this.dy;
      }
      this.ele.setAttribute('cx', this.x);
      this.ele.setAttribute('cy', this.y);
      //console.log(this.x + ':' + this.y);
    }
  }

  var Path = function(obj){
    if(!obj){
      var obj = {d:'M 100,100 a 50,50 0 1,1 {x},0'};
    }
    this.d = obj.d;
    this.svg, this.circle;
    this.t = 0;
    this.is = false;
    this.x = 100, this.y = 100;
    this.rx = 100, this.ry = 100;
    var ele = document.createElementNS(ns, 'svg:path');
    this.$ = $(ele);
    ele.setAttribute('fill', 'none');
    ele.setAttribute('stroke', '#000000');
    if(obj.id){
      ele.setAttribute('id', obj.id);
    }
    this.ele = ele;
    
  }

  Path.prototype = {
    move : function(){
      this.t++;
      this.x = Math.sin(this.t/8)  * 100 ;
      this.y = Math.cos(this.t/8)  * 100 ;
      this.rx = Math.sin(this.t/20)  * 50 +20;
      this.ry = Math.cos(this.t/20)  * 50 +20;
      this.rot = Math.cos(this.t/20) * 180 -180;
      this.is = !this.is;
      this.a = this.is ? 1 : 0;
      var rxy = this.rx+',' +this.ry;
      var xy = this.x+',' +this.y;
      //M 400,0  a 75,75 0 1,1 0,200
      var d = this.d;
      d = d.replace('{x}', this.x);
      d = d.replace('{y}', this.y);
      d = d.replace('{rx}', this.rx);
      d = d.replace('{ry}', this.ry);
      d = d.replace('{a}', this.a);
      d = d.replace('{rot}', this.rot);
      console.log(this.d);
      this.ele.setAttribute('d',d);
    }
  }


  function anime(circle, area) {
    circle.move(area);
  }

  function init() {
    var paths = [];

    //SVG図形を生成して、時間毎に属性値を変更し、アニメーションさせる
    var area = new Area();
    var circle = new Circle();
    var path  = new Path();
    var path2 = new Path({d:'M 0,200 C 200,400 300,0 {x},{y}', stroke:'#aaa', id:'path2'});
/*
    var path3 = new Path({d:'M 100,300 a 100,{ry} 0 1,1 100,0' , id:'path3'});
    var path4 = new Path({d:'M 200,200 a {rx},{ry} 0 1,1 100,0', id:'path4'});
    var path5 = new Path({d:'M 200,300 a 25,25 0 0,{a} 100,0', id:'path5'});
    var path6 = new Path({d:'M 200,400 a 50,100 {rot} 0,0 100,0', id:'path6'});
*/

    
    paths.push(circle);
    paths.push(path);
    paths.push(path2);

    //jQueryのままだとSVGタグ追加できない
    //var svg = $('<svg>', {width:400, height:400, viewBox:'0 0 100 100'});

    //var svg = $('svg');
    var svg = document.createElementNS(ns, 'svg');
    $('#svgBox').append(svg);

    for(var i=0,len=paths.length;i<len;i++){
      svg.append(paths[i].ele);
    }

    var timer;
    var loop = function(){
      timer = setInterval(function(){
        for(var i=0,len=paths.length;i<len;i++){
          paths[i].move();
        }
      }, 200);
    }
    loop();
    $('#stop').on('click',function(){
      clearInterval(timer);
    }).on('dblclick',function(){
      loop();
    });
  }
  init();

})();

svg{
  width:400px;
  height:400px;
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-svg/svg-js-replaceValue/