問題タブ [tspan]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
svg - SVG tspan 水平オフセット
私は svg の tspan タグを理解しようとしていますが、ここに奇妙なことがあります。次のコードを見てください。FF と Chrome は tspan 間に水平オフセットを導入しますが、何もないはずです。
http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.htmlにアクセスし、SVG エディター (トップ メニュー バーの 2 番目のボタン) にコードを入力して、変更を適用します。tspan 間のオフセットは存在しません! 理由はわかりませんが、HTML にも SVG にも CSS にも特別なものはないようです。
誰かがこのなぞなぞを解いてくれることを願っています。font-size に関連しているようで、それを変更するとオフセットが変更されます。ただし、0px に設定すると、テキストが消えます。
javascript - SVG テキストの垂直方向の高さの計算
私は文字列の配列を持っています。言う、
そして、これらの文字列を使用して縦書きのテキストを作成しています
SVG がレンダリングされた後、テキストの高さが 36px であることがわかりました。フォントサイズを指定して事前にレンダリングされるテキストの高さを計算する方法はありますか?
javascript - SVG がプログラムによって挿入される理由d3.jsを除いて、要素は描画されませんか?
次の SVG<tspan>の要素にプログラムで追加を挿入したいとします。<text>
これは、純粋な JavaScript ( .appendChild)、jQuery ( .append)、および d3.js ( .append) などを使用して実行できます。ただし、3 つの方法すべてで要素が正常に挿入されますが、d3.js によって挿入された場合にのみ、実際に表示されるように見えます。
このフィドルの縮小ケースを参照してください: http://jsfiddle.net/2NLJY/。
この動作は、私がテストしたブラウザー (Firefox、Chrome、および Safari (すべて OS X 10.8)) で一貫しています。
ここで何が起こっているのですか？
jquery - jQuery: SVG tspan に html シンボルを書き込む
°jQuery を使用して TSPAN 要素にHTML シンボル ( など) を書き込もうとしています。単純な SPAN では簡単です。
TSPAN を使用すると、この方法は機能しません。
何も出力されません。
と
°°（明らかに）の代わりに印刷されます
どのようにできるのか？
javascript - D3js - Chrome で tspan の更新が機能しない
text() で tspan を動的に更新すると、Chrome がレンダリングされません。
これは、クロムを除くすべてのブラウザで正常に機能しています。この JavaScript の行にコメントすると、すべてがクロムで正常に動作します。
クロムで動作しない理由を教えてください。span 以外のタグは使用できません。
text - d3でラップされたテキストをアニメーション化する
うーん。TSPAN を使用して SVG テキストを動的にラップする方法を理解したので ( SVG テキストの自動行ラップ を参照)、それをアニメーション化しようとして困惑しました。Mike Bostock の Zoomable Treemap の例に基づいています。
私のテキストラッピングコードは次のように呼び出されます：
古い Mike 行を元に戻すと問題なく動作しますが、テキストの折り返しは削除されます。
親の TEXT 要素をアニメーション化する必要があるだけだと思っていましたが、Chrome でテキストが奇妙な方向に移動しています (さらに、IE9 では、テキストがまだ折り返されたくない場合にさらに悪い動作になります)。x属性を持つTSPANに関係していると思われますが、それ以上の道は見えません...
単線
折り返し線
JS コードは非常に長いので、フィドル リンクは次のとおりです: http://jsfiddle.net/gHdR6/6/
css - テキスト行を SVG の中央に揃える
複数行のテキストを SVG で出力する必要があります。そのために、次のスキームを使用しています。
テキストの 1 行目と 2 行目の文字数は異なる場合があり、動的に変更される場合があります。2 行目を最初の行の下に表示し、両方のテキストを中央に配置します。
dy="15"2 番目の行に を追加することで、2行目を最初の行の下に表示できます<tspan>。
<tspan>追加することで、各個人のテキストを揃えることができますtext-anchor="middle"。
しかし、それらの相対的な中心位置合わせを行うにはどうすればよい<tspan>でしょうか?
x="0"それぞれに使用しようとしましたが、それぞれ幅が異なり、短い行のレンダリングされたテキストが左にシフトするため<tspan>、明らかに機能しません。<tspan>
<tspan>CSS や SVG のみを使用して、幅の異なる2 の中心を揃える方法はありますか。
angularjs - svg テキスト タグの ng-bind-html は、Firefox と IE で tspan を表示しません
tspan が ng-bind-html 属性から読み込まれると、angularjs で svg をビルドできません。Firefox と IE では表示されません。
私のコントローラーはそのように見えます:
説明するためにフィドルを作成します
クロムの場合は問題ありません。