改行をしたいが、<br>となって出来ない

https://codepen.io/LandonSchropp/pen/xLtif

こちらのscriptの
words = [ "the", "of", "and", …];
に日本語を入れて、なおかつ途中で改行をしたいと思っています。

例　words = [ "ああ\nあああ", "いいいい\nいいい", "うううう\nううう", …];

合間に\nを入れて、replaceで元のコード

$word.text(word);
を
＄word.text(word.replace(/\n/g,"\<br /\>"));

と書いたのですが、ソースでは<br>が

&lt;br&gt;

↓ソース
<h1 style="background-color: hsl(288, 100%, 50%);"><svg xmlns="http://www.w3.org/2000/svg" role="img"><title class="title">Random</title><text class="word" dominant-baseline="central" fill="#222" stroke="#222" stroke-linecap="round" stroke-width="1.5%" text-anchor="middle" x="50%" y="50%">いいいい&lt;br /&gt;いいい</text><text class="word" dominant-baseline="central" fill="white" text-anchor="middle" x="50%" y="50%">いいいい&lt;br /&gt;いいい</text></svg></h1>

と表示され、ブラウザで見ると<br>と表示され、改行はされぬままです。

色々と自分で検索して調べてはいるのですが、知識不足で分かりません。
お分かりになる方、助けて頂けませんでしょうか

No.4 ベストアンサー 回答者： fujillin 回答日時： 2019/02/15 15:37

No3です。

少し調べてみたら、もう少し要領の良い書き方ができそうなので・・・
（同じtextタグを2度書かなくても良くなります）
・defタグ内に雛形を定義しておくことで、これを2回参照します。
・改行はtspanで実現します。行送りはdy属性で変更可能
・文字サイズはfont-sizeで指定可能
・・・etcです

（位置の基準は左上基準にしてあります）

<svg width="500" height="500" viewbox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<defs>
<text id="word1" font-size="40px" fill="white" x="0" y="0" >
<tspan x=0 dy="0">ああああああ</tspan>
<tspan x=0 dy="40">いいいいいいい</tspan>
<tspan x=0 dy="40">うううううう</tspan>
</text>
</defs>

<use x="100" y="100" href="#word1" stroke="#222" stroke-width="1.5%" />
<use x="100" y="100" href="#word1" stroke="white" />
</svg>

No.3 回答者： fujillin 回答日時： 2019/02/15 13:07

こんにちは

私の環境では、ご提示のリンク先が見られないので、どのようにして作成しているのかがわかりませんが、出来上がったソースを見る限りでは、普通のSVGのようですので、「与えられたテキストをSVGに変換してくれるサイト」なのかなと想像しました。

フォントのアウトラインをどのように実現しているかというと、黒色の文字を太さを太くして描いた上に、白の少し細くした文字をまったく同じ位置に重ねることで、アウトラインに見せているという仕組みですね。
ですので、必ず同じテキストを持ったタグが二つセットで並んでいるはずです。
（黒文字用と白文字用）
制御コード（改行等）は文字としては表示できないので処理対象にならないですね。
（処理前にHTMLタグ（＝文字）に変換しているものと想像）


複数行の表示をしたいのでしたら、1行ずつを作成して縦に並べても良いですが、縦位置を制御できますので、同じSVG内ににまとめて記してしまった方が簡単でしょう。
仕組みさえわかってしまえば、直接タグを編集することも可能です。

<h1 style="background-color: hsl(28, 100%, 50%);">
<svg xmlns="http://www.w3.org/2000/svg" role="img">
<text class="word" dominant-baseline="central" fill="#222" stroke="#222" stroke-linecap="round" stroke-width="1.5%" text-anchor="middle" x="50%" y="40%">ああああああ</text>
<text class="word" dominant-baseline="central" fill="white" text-anchor="middle" x="50%" y="40%">ああああああ</text>
<text class="word" dominant-baseline="central" fill="#222" stroke="#222" stroke-linecap="round" stroke-width="1.5%" text-anchor="middle" x="50%" y="70%">いいいいい</text>
<text class="word" dominant-baseline="central" fill="white" text-anchor="middle" x="50%" y="70%">いいいいい</text>
</svg></h1>

四つある<text>タグのうち、最初の2つが「ああああああ」の黒と白文字、後の2つが「いいいいい」の黒と白文字です。
表示された結果は、以下の添付図のようになります。


SVGの記述法を手っ取り早く知りたければ
http://memopad.bitter.jp/w3c/graphics/svg_text.h …

仕様書は
https://triple-underscore.github.io/SVG11/index. …

No.2 回答者： t_fumiaki 回答日時： 2019/02/15 11:32

<や>は制御記号である為、それを制御記号として機能させずに<や>を文字として表示したい場合にエスケープする訳です。

今回は、そうじゃ無くて、そのまま制御記号として機能させたわけでしょ？

だったら、直接
words = [ "ああ<br>あああ", "いいいい<br>いいい", "うううう<br>ううう", …];

No.1 回答者： lowrider_2005 回答日時： 2019/02/15 11:11

この辺参考になりませんか？

https://qiita.com/hrdaya/items/4beebbdb57009b405 …