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>が
<br>
↓ソース
<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%">いいいい<br />いいい</text><text class="word" dominant-baseline="central" fill="white" text-anchor="middle" x="50%" y="50%">いいいい<br />いいい</text></svg></h1>
と表示され、ブラウザで見ると<br>と表示され、改行はされぬままです。
色々と自分で検索して調べてはいるのですが、知識不足で分かりません。
お分かりになる方、助けて頂けませんでしょうか
No.4ベストアンサー
- 回答日時:
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
- 回答日時:
こんにちは
私の環境では、ご提示のリンク先が見られないので、どのようにして作成しているのかがわかりませんが、出来上がったソースを見る限りでは、普通の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
- 回答日時:
<や>は制御記号である為、それを制御記号として機能させずに<や>を文字として表示したい場合にエスケープする訳です。
今回は、そうじゃ無くて、そのまま制御記号として機能させたわけでしょ?
だったら、直接
words = [ "ああ<br>あああ", "いいいい<br>いいい", "うううう<br>ううう", …];
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
確認ダイアログを次からは表示...
-
折りたたみを全て開いて別ペー...
-
GoogleストリートビューAPIでイ...
-
jQueryのappendで追加したdiv...
-
年月日時分を指定してCSSを切り...
-
2回目以降のページロード時には...
-
「ご処理進めて頂きますようお...
-
エクセルで、日付を入力すると...
-
Excelシート上のマクロを登録し...
-
エクセルVBAで、MsgBox やInput...
-
CloseとDisposeの違い
-
switch の範囲指定
-
DoEventsがやはり分からない
-
アクセスVBAのMe!と[ ]
-
VBA エンターキーでイベントに...
-
VBAでループ内で使う変数名を可...
-
インタラクティブの反対語は?
-
UMLでの例外処理
-
EXCELのマクロが 実行時エラー5...
-
Googleフォーム・複数人の申し...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
確認ダイアログを次からは表示...
-
CSSでreadonlyの機能はあり...
-
formのsubmitを押すとモーダル...
-
iframe内のスクリプトを親から3...
-
動画の上に広告をオーバーレイ...
-
改行をしたいが、<br>と...
-
webサイトに動画をはりつけ、ク...
-
時間帯によってclass名を変更し...
-
特定の条件のHTML要素を一括で...
-
javascriptでの(-)ハイフンの処...
-
macかwinか判別しスタイルシー...
-
jQuery 画面サイズにスライド画...
-
3重のクォーテーション
-
vertical sliderをautoplayしたい
-
雪が降るようなスクリプト
-
SITEINFOの書き方について
-
javascriptで複数の表示・非表...
-
jQueryのCSSで値に変数を使う方法
-
ポップアップのリンク先と閉じ...
-
エクセル VBA ボタンが押せな...
おすすめ情報