Что использовать вместо «контекста» для модификации SVG?

Question

Я пытаюсь обновить существующий проект, который имеет дело с SVG , написанным с помощью jQuery 1, для запуска с текущей версией. Он по-прежнему использует свойство .context, которое устарело и, конечно, теперь выдает ошибки. Я пытался что-нибудь, но я понятия не имею, как добраться до объекта и изменить текст.

Я обнаружил, что обычно вы можете использовать «документ» вместо .context при работе в HTML-документе. Но в этом случае я пытаюсь получить доступ к текстовой метке в элементе SVG. Используя старую версию jQuery, я обнаружил, что целевой объект имеет следующий тип [object SVGTextElement]

    labelMeasure = qSVG.create("none", "text", {
      x: 0,
      y: -10,
      'font-size': '1.2em',
      stroke: "#ffffff",
      "stroke-width": "0.4px",
      'text-anchor': 'middle',
      fill: "#3672d9"
    });

    binder.graph.append(labelMeasure);
    $('#boxbind').append(binder.graph);
  } else {
    cross.attr({
      "transform": "translate(" + (snap.x) + "," + (snap.y) + ")"
    });

    if (action == 1) {
      var startText = qSVG.middle(pox, poy, x, y);
      var angleText = qSVG.angle(pox, poy, x, y);
      var valueText = qSVG.measure({
        x: pox,
        y: poy
      }, {
        x: x,
        y: y
      });
      binder.size = valueText;
      binder.x = startText.x;
      binder.y = startText.y;
      binder.angle = angleText.deg;
      valueText = (valueText / meter).toFixed(2) + ' m';
      labelMeasure.context.textContent = valueText; // <--
      binder.update();
    }
  }
}

Это сообщение об ошибке при использовании устаревшего свойства .context:

TypeError: undefined не является объектом: (оценивается 'labelMeasure.context.textContent = valueText')

Answer 1

Трудно быть уверенным, потому что я не знаю, что на самом деле делает qSVG(). 1002 *

Но вы можете попробовать заменить

labelMeasure.context.textContent = valueText;

с

labelMeasure.text(valueText);

Если это не сработает, то вам следует обновить ваш вопрос с минимальным воспроизводимым примером .

https://jsfiddle.net/wavmxpzq/