用什么代替“上下文”来修改 SVG？答案

【问题标题】：What to use instead of 'context' to modifiy SVG?用什么代替“上下文”来修改 SVG？
【发布时间】：2019-11-04 04:14:14
【问题描述】：

我正在尝试更新处理 SVG 的现有项目，该项目使用 jQuery 1 编写以在当前版本上运行。它仍然使用已弃用的 .context 属性，当然现在会抛出错误。我已经尝试了任何方法，但我不知道如何到达对象并更改文本。

我发现在 HTML 文档中工作时，通常可以使用 'document' 而不是 .context。但在这种情况下，我试图访问 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 is not an object: (评估 'labelMeasure.context.textContent = valueText')

【问题讨论】：

标签： jquery html svg

【解决方案1】：

很难确定，因为我不知道 qSVG() 究竟做了什么。

但你可以尝试替换

labelMeasure.context.textContent = valueText;

与

labelMeasure.text(valueText);

如果这不起作用，那么您应该使用minimal, reproducible example 更新您的问题。

https://jsfiddle.net/wavmxpzq/

【讨论】：

非常感谢！这是绝对正确的，并且可以完成工作！