view source

JavaScript

(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();

})();

CSS

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

HTML

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

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

ABOUT

hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

必要な機能の関数をコピペ利用したり勉強に活用できます。

プログラムの動作サンプル結果は画面上部に出力表示されています。

環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。