Как дописать в уже заполненный атрибут? JavaScript SVG

Question

Надо в атрибут d тэга path дописать новые координаты что-бы предидущие не потерялись.

for(i=0;i<vd.length;i++){

cnv=312/60000;
strtR=vd.start(i)*cnv;
endR=vd.end(i)*cnv;

pathTag.setAttribute('d',pathTag.getAttribute('d')+'M'+strtR+',1'+' '+endR+',1') //ответ

}

Отедактировал вопрос и код. В коде была ошибка/неточность что приводило к отрисовке сплошной линии. Теперь в коде содержится и ответ на мой вопрос.

Answer 1

Записываете текущее значение в переменную и добавляете новое к ней. Но лучше записать все значение в переменную и только потом записать в атрибут.

const pathTag = document.getElementById('path');
vd = ['m 77.463975,66.342984', 'c 2.254,0', '4.716,0.692', '7.317,2.059',
  '6.336,3.328', '11.771,14.738', '14.513,21.439', '2.742995,-6.701',
  '8.176005,-18.111', '14.513005,-21.439', '2.601,-1.367', '5.063,-2.059',
  '7.316,-2.059', '4.552,0', '7.122,2.704', '8.504,4.156', 'l 0.288,0.301',
  'c 1.066,1.092', '2.583,2.972', '3.686,4.382', '3.24,-3.12',
  '10.702,-9.386', '18.438,-9.456', 'h 0.173', 'c 3.964,0', '7.002,1.235',
  '9.03,3.67', '3.139,3.77', '2.604,8.923', '2.229,10.964', '-0.379,2.059',
  '-1.195,4.272', '-2.045,6.198', '8.579,-4.322', '25.225,-14.637',
  '27.92,-30.635', '3.104,-18.423', '-14.914,-30.877', '-30.576,-38.081',
  '-5,-2.3', '-12.379,-4.661', '-17.395,-6.159', '3.579,6.26',
  '5.8,15.43', '-1.212,23.068', '-3.513,3.827', '-7.954,5.85',
  '-12.843,5.85', '-8.752,0', '-17.448,-6.653', '-18.609,-14.237',
  '-0.753,-4.914', '-1.161,-10.578', '-1.38,-14.936', 'l -2.07401,3.646',
  'c -0.363,0.637', '-1.05,1.051', '-1.778,1.01', 'l -4.224995,-0.084',
  '-4.145,0.084', 'c -0.754,0.033', '-1.416,-0.373', '-1.778,-1.01',
  'l -2.074,-3.646', 'c -0.219,4.357', '-0.627,10.022', '-1.38,14.936',
  '-1.162,7.584', '-9.857,14.237', '-18.609,14.237', '-4.889,0',
  '-9.329,-2.023', '-12.842,-5.85', '-7.012,-7.639', '-4.791,-16.808',
  '-1.211,-23.068', '-5.016,1.497', '-12.396,3.858', '-17.396,6.159',
  '-15.662,7.204', '-33.6800002,19.659', '-30.5760002,38.081',
  '2.6960002,15.998', '19.3410002,26.313', '27.9200002,30.635',
  '-0.849,-1.926', '-1.665,-4.14', '-2.044,-6.198', '-0.376,-2.041',
  '-0.912,-7.194', '2.227,-10.963', '2.028,-2.436', '5.067,-3.671',
  '9.032,-3.671', 'h 0.173', 'c 7.736,0.07', '15.198,6.336',
  '18.438,9.456', '1.103,-1.41', '2.619,-3.29', '3.686,-4.383',
  'l 0.29,-0.302', 'c 1.379,-1.451', '3.95,-4.154', '8.499,-4.154 z'
];

for (i = 0; i < vd.length; i++) {
  const d = pathTag.getAttribute('d');
  pathTag.setAttribute('d', `${d} ${vd[i]}`);
}

<svg xmlns="http://www.w3.org/2000/svg">
  <path id="path" d="" />
</svg>

БЛОГ НА HUSL

Как дописать в уже заполненный атрибут? JavaScript SVG

Ответы (1 шт):