問題タブ [tspan]

tspan を使用してチャットルーム メッセージへの Javascript に取り組んでいます。
オリジナル: この関数は、svg の各アイテムの名前とコンテンツ テキストを tspan に追加します。

HTMLのようなハイパーリンクを表示したい（スタイルでクリック可能）

考え：

PS検索URLは後ほど実装予定です。
この段階では、
テスト用に tspan サンプル Web サイト 内にハイパーリンクを表示することに焦点を当てています。

https://www.w3.org/TR/SVG/text.html#TSpanElementをチェックしましたが、<a>内部<tspan>は問題ないと思われ
ます。これがうまくいかない理由を誰か提案できますか?

完全なソース コード:
https://www.sendspace.com/file/2xhpk8

Robert Longson の意見、新しいアイデアに感謝します。

しかし、機能していません

テキストを追加するには、テキストtext
を表示する方法を理解する必要がありますが、リンク効果はありません

次のように複数行のキャプションを追加して、この例から独自のサンバースト ダイアグラムを作成しています。.

これは初期状態ではまったく問題なく動作しますが、特定のパーティションをクリックしてズームすると、すべてが乱雑になります。スクリプトは最初の行要素のみを移動し、他の要素を非表示にせず、画面上にあるべきではありません。

パーティションごとに変換するにはどうすればよいですか? 「tspan」またはそのスタイルクラスによる選択を試みました。

名前を付け直して再作成することでブロックを完全に更新することは可能ですか?の

次のようなコードが少しあります。

問題は、最後の 3 つの tspan にあります。それらはすべて右揃えですが、Chrome と Firefox では、3 つのうち最後のほうが最初の 2 つよりも右端に近くなっています。IE 11 では、これは発生しません。

誰が原因が何であるか教えてもらえますか? スクリーンショットは次のとおりです。

ありがとう！

ノードに を追加しtspanていtextますが、ブラウザが新しいサイズ/ボックスを再計算していません

JS コード:

常に返さ0, 0れます。これは、追加後にサイズが再計算されないことを意味します

この場合、再計算を強制する方法は?

jsfiddle

Web ページをレスポンシブにするために、グラフィックと div を SVG 画像に移行しました。現在、画像自体はすべてのブラウザで正常に動作します。しかし、動的に塗りつぶされたテキスト パッセージも、要素<text>と<tspan>要素を使用して SVG に移行しました。さまざまなブラウザー開発者ツールでエミュレートすると、すべて機能し、値が更新され、すべてのスケールが適切に調整されます。

しかし、グループ化されたテキストの整列に関しては、ブラウザーの動作が異なり、頭痛の種になります。2 列の値が必要です。右の列は右に配置し、右の列は左に配置する必要があります。これを達成するためtext-anchor="end"に、左のグループの値を使用しました。そのグループは、さまざまなブラウザーで問題を引き起こします。

インデントされた読み取り可能で編集可能な (IMHO) コードを使用すると、Chrome と Firefox は最初の 2 行を 1 ノッチ左に移動し (または最後の行を右に移動しますか?)、IE/Edge はすべて一列に表示されます。

<tspan>要素内の要素のコードを<text>完全にインライン FF で記述すると、Chrome はそれをすべてうまく表示しますが、今回は IE/Edge が最後の行を左にインデントします。

フィドルで問題を再現できました: https://jsfiddle.net/bL16wv3z/12/

Chrome と FF では右の列が適切に配置され、IE/Edge では左の列が適切に配置されて表示されます。

フィドルで使用されるコード例:

では、すべてのブラウザで整列を機能させるにはどうすればよいですか、それとも書式設定/配置に何か不足していますか?

前もって感謝します