SVG：使用 CSS 设置 <text> 内容答案

【问题标题】：SVG: Set <text> content with CSSSVG：使用 CSS 设置 <text> 内容
【发布时间】：2015-10-14 23:37:46
【问题描述】：

可以吗

<svg>
  <text></text>
</svg>

svg text {
  content: 'a';
  font-family: 'Glyphicon Halflings';
}

似乎:before 和:after 伪元素不可用，但我很乐意让我的内容由 css 设置。可以吗？

【问题讨论】：

stackoverflow.com/questions/24026458/css-before-on-inline-svg 的相关（甚至可能是欺骗）
你试过了吗？这似乎是最明显的事情。
我已经尝试了我的示例，但它不起作用（content 仅适用于 :before 和 :after，这在 svg 中不可用，感谢 Harry 的 link）。但是 CSS svg 中还有其他键在传统 CSS 中不存在（例如 fill、stroke），所以也许有一个设置 <text> 内容？
这么简单......答案是“不”......你不能。

标签： css svg

【解决方案1】：

不可能使用纯 CSS。需要使用简单的JS：

function changeMyText()
{
    document.getElementById('MyText').textContent = "new text";
}

并为您的 SVG 文本创建 ID：

<svg>
    <text id="MyText"></text>
</svg>

【讨论】：