如何使用 javascript insideHTML 更改 svg 文本标签

Question

我正在使用raphaeljs，我想在svg中显示html（不仅仅是文本），

所以我使用这个代码：

var r = Raphael("holder", 200, 300);
var t = r.text(10, 10, "ssdwqdwq");
t.node.innerHTML='dddd'

但我无法更改svg的内容，所以我在firebug中控制台它，

console.log(t.node)

它显示了：

<text x="10" y="13.5" text-anchor="middle" style="font: 10px "Arial";" font="10px "Arial"" stroke="none" fill="#000000">

那么如何更改文本在 svg 上使用 javscript

谢谢

Answer 1

SVG 节点没有innerHTML 属性（它们不是HTML）。

使用 textContent 代替：t.node.textContent='dddd'

Answer 2

我可以通过设置 元素的 textContent 属性来实现此目的。如果您知道元素的 ID，事情就会变得容易得多。

document.getElementById("id-of-text-el").textContent = "My Value";

Answer 3

如果 svg 文本的代码如下所示：

<text id="id-of-the-text"> old value</text>

如果您使用的是 JQuery，请尝试以下操作：

$("#id-of-the-text").text("new-value");

Answer 4

更改 svg 元素的 ìnnerHTML 属性在 2010 年可能是一个问题。2023

年它可以在所有现代浏览器中完美运行：

// OP's example 
var r = Raphael("holder", 200, 300);
var t = r.text(50, 50, "ssdwqdwq").attr({
  'font-size': 20,
  'font-family': 'Arial',
  'font-weight': 'bold',
  fill: '#000',
  width: 400
});
t.node.innerHTML='dddd';

/**
* add foreignObject 
* to enable HTML elements
* make sure to apply the correct namespaces 
* for <foreignObject> and inner <div>
*/
let nsSvg = 'http://www.w3.org/2000/svg'
let nsHtml = 'http://www.w3.org/1999/xhtml'
let foreignObject = document.createElementNS(nsSvg, 'foreignObject');
foreignObject.setAttribute('x', 20)
foreignObject.setAttribute('y', 50)
foreignObject.setAttribute('width', '100%')
foreignObject.setAttribute('height', 150)

let foreignObjectDiv = document.createElementNS(nsHtml, 'div');
foreignObjectDiv.innerHTML = `Foreign <em style="color:red">object</em> <strong>text</strong>`;
foreignObject.appendChild(foreignObjectDiv)

//append foreign object
r.canvas.appendChild(foreignObject)

svg{
  border: 1px solid #ccc
}

text{
  font-size:20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
<div id="holder"></div>

通过 < 将 HTML 元素附加到 SVG /code>

动态附加外部对象时使用正确的命名空间至关重要：

// foreignObject is a svg 
let foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
// HTML element within foreign object
let foreignObjectDiv = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');

请记住，foreignObject 只能在具有 HTML 渲染支持的应用程序中工作。

许多图形/桌面应用程序可能会省略其内容。
您可能还会在某些库中尝试将 svg 转换为 pdf 时遇到问题。

如果您不需要复杂的多行文本布局，则最好坚持使用 SVG 的原生 和 元素。

Answer 5

除了Zecc的答案之外 - 可以使用innerHtml来获取SVG元素的内容，例如（我确定） - 文本元素和svg路径的内容

Answer 6

我的转译器没有 textContent 属性的定义
我在这个 2879473 问题中找到了另一个答案。

while (t.node.hasChild) {
    t.node.removeChild(t.firstChild);
}
var txt = document.createTextNode("ddd");
t.node.appendChild(txt);

你可以通过 innerHTML 得到相同的结果，但是
DOM API 可能比属性快一点。
请参阅Maxim回答

（抱歉，我没有测试createTextNode和appendChild）