// SNGでは角度を指定入力はできないので、手動かJavaScriptで座標を計算する

var ns = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(ns, 'svg');
var svgNS = svg.namespaceURI;

svg.setAttribute('width', 400);
svg.setAttribute('height', 400);

container = document.getElementById('demo');
container.appendChild(svg);

var m = 'M 200,200 ';
var p = 'l 100,0 ';
var pTemp = 'l {x},{y} ';
var deg = 0;
var x = 200;
var y = 200;


var circle = document.createElementNS(svgNS, 'circle');
circle.setAttribute('cx', x);
circle.setAttribute('cy', y);
circle.setAttribute('r', 10);
circle.setAttribute('fill', '#000');
svg.appendChild(circle);


var getD = function(){
  p = pTemp;
  p = p.replace('{x}', x);
  p = p.replace('{y}', y);
  d = m + p;
  return d;
}

var d = getD();
console.log(d);
var line = document.createElementNS(svgNS, 'path');
line.setAttribute('d', d);
line.setAttribute('fill', 'none');
line.setAttribute('stroke', '#000');
svg.appendChild(line);



$(function(){
    var params = ['x', 'y', 'deg', 'rad'];
    var form = $('<div>').appendTo('#demo');
    var input = $('<input>', {type:'number', title:'angle deg(0-360)', min:0, max:360}).val(90).appendTo(form);
    var range = $('<input>', {type:'range', title:'angle deg(0-360)', min:0, max:360}).val(90).appendTo(form);
    
    var dl = $('<dl>').appendTo(form);
    var dts = {};
    var dds = {};
    params.forEach(function(v){
      dts[v] = $('<dt>').text(v).appendTo(dl);
      dds[v] = $('<dd>').appendTo(dl);
    });
    input.on('change', function(){
      deg = Number($(this).val());
      calsPath(deg);
    });
    range.on('change', function(){
      deg = Number($(this).val());
      calsPath(deg);
    });
    var calsPath = function(deg){
      var l = 100;
      var rad = deg * (Math.PI / 180);
      var vals = {};
      x = Math.cos(rad)*l;
      y = Math.sin(rad)*l;
      d = getD();
      var vals = {
        x:x,
        y:y,
        deg:deg,
        rad:rad,
      }
      params.forEach(function(v){
        dds[v].text(vals[v]);
      });
      input.val(deg);
      range.val(deg);
      line.setAttribute('d', d);
    }

    
    var button = $('<button>').text('move').appendTo(form)
    .on('click', function(){
      var timer = setInterval(function(){
        deg+=10;
        if(deg > 300){
          clearInterval(timer);
        }
        input.val(deg).trigger('change');
      }, 100);
    });
});


/*
*/

#demo span{
  display:inline-block;
  padding:12px;
}

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

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