SVG可变文本

Question

我知之甚少，但SVG我想使文本参数变量，这样我就可以遍历并创建SVG标记的，其通过（可变）文本只不等。这是我能做到

'<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">' + 
 
    '<rect stroke="black" fill="${FILL}" x="1" y="1" width="22" height="22" />' + 
 
    '<text x="12" y="18" font-size="12pt" font-family="Arial" font-weight="bold" ' + 
 
    'text-anchor="middle" fill="${STROKE}" >hello world 
 
    </text></svg>'

（从它的API我使用的网站借来）但是，这是我想什么（或东西的作品喜欢它）：

'<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">' + 
 
    '<rect stroke="black" fill="${FILL}" x="1" y="1" width="22" height="22" />' + 
 
    '<text x="12" y="18" font-size="12pt" font-family="Arial" font-weight="bold" ' + 
 
    'text-anchor="middle" fill="${STROKE}" >"${TEXT}"</text></svg>'

这样我就可以动态地更改文本。

Answer 1

好吧我想通了;回想起来，这是一个愚蠢的问题。只是+ varName +正常字符串连接更换出现故障的$ {文字}标签，如：

var svgMarkup = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">' + 
 
\t \t '<rect stroke="black" fill="${FILL}" x="1" y="1" width="22" height="22" />' + 
 
\t \t '<text x="12" y="18" font-size="12pt" font-family="Arial" font-weight="bold" ' + 
 
\t \t 'text-anchor="middle" fill="${STROKE}" >'+ varName +'</text></svg>';

Answer 2

你居然可以使用${TEXT}，和它的工作（除IE）。

的这个名字是template literal：

模板文字是字符串常量，允许嵌入的表达式。

然而，对于这个工作，你应该已经包围的整个字符串用反单引号（'）。

下面是使用字符串工作演示（几乎没有变化）：

var FILL = "tan", STROKE = "black", TEXT = "Hello World"; 
 

 
var svgMarkup = `<svg xmlns="http://www.w3.org/2000/svg" width="100" height="24" 
 
xmlns="http://www.w3.org/2000/svg"><rect stroke="black" fill="${FILL}" x="1" y="1" 
 
width="22" height="22" /><text x="12" y="18" font-size="12pt" font-family="Arial" 
 
font-weight="bold" text-anchor="start" fill=${STROKE}>${TEXT}</text></svg>`; 
 

 
var div = document.getElementById("foo"); 
 
div.innerHTML = svgMarkup;

<div id="foo"></div>