SVG変数のテキスト

Question

私はSVGについて少し知っていますが、テキストパラメータの変数を作成しようとしていますので、（変数）テキストだけで変化する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}" >hello world 
 
    </text></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}" >"${TEXT}"</text></svg>'

ので、私は動的にテキストを変更することができます。

Answer 1

私はそれを理解しました。振り返ってみると、それはちょっとばかげた質問だった。

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以外の）動作します：ただ、通常の文字列連結のよう+ varName +と障害のある$ {TEXT}タグを交換してください。

これの名前は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>