問題タブ [tspan]

<tspan>テキスト装飾に関して、SVG 要素の一貫性のないレンダリングが見られます。

この簡単なテストケースを使用して:

WebKit (~Safari 8)

ファイアフォックス (37)

インターネットエクスプローラー (11)

テキストの装飾に関するセクションでは、あまり説明がないようです。

'text-decoration' が 'text' 要素で指定されているため、'text' 要素内のすべてのテキストは、'text' 要素に存在するのと同じ塗りと線のプロパティ (つまり、青の塗りつぶし、赤の線) でレンダリングされる下線を持ちます。 )、さまざまな単語の塗りと線のプロパティ値が異なりますが。ただし、「異なる」という単語は、「テキスト装飾」の値を明示的に指定します。したがって、その下線は、fill プロパティと stroke プロパティを使用して、「different」という単語を囲む 'tspan' 要素としてレンダリングされます (つまり、黄色の塗りつぶし、濃い緑色のストローク)。

塗りつぶし/ストロークの明確化がありますが、フォントサイズについては何もありません. これは、これが実装者の決定に任されているということですか? これは他の場所で定義/説明されていますか?

Ext.draw.Text... を使用して、Ext チャートのカスタム凡例パネルを作成しました。私のアプリケーションでは、凡例に長いカスタム テキストが含まれている場合があります。したがって、固定長を使用してそれらを分割する必要があります。1 つの方法は、Javascript を使用してテキストを 2 つに分割し、テキストの各部分にテキスト スプライトを作成することです。

Ext.draw.Text でテキストを分割する他の方法はありますか?

コード：

前もって感謝します。

何らかの理由で、タグが閉じられtspanていても要素の位置が保持されます。tspan

http://jsfiddle.net/4fzqmeud/1/

との両方の数値は2、のみが 内にあるにもかかわらず3、配置の影響を受けます。ただし、属性によってはそうではありません。これは予期しない動作だと思います。tspan2tspanfill

の周りで別のものtspanを使用できることを知っています。しかし、これは非常に面倒なようです。さらに別の tspan を追加せずに、後に位置を「自動的に」リセットする方法はありますか?y="50"3tspan

HTML:

はxと重なっていTestます。なぜこれが起こっているのかわかりません。属性を削除text-anchorしても発生しません。

デモ: http://jsfiddle.net/dvt4nv94/2/

これを尋ねる最善の方法がわかりません。複数の tspan 子要素を単一の svg テキスト オブジェクトに追加したいと考えています。次のコードがあります。

これを実行すると、tspan 要素が 5 回ではなく 1 回だけ追加されているように見えます。同じ tspan 変数を再利用して、5 回別々に追加することはできますか?

http://codepen.io/cmgdesignstudios/pen/VePwog?editors=101で例を見ることができます。

2 つの tspan 要素を持つ svg テキスト要素があります。このように見えます。

このような 2 番目の空のテキスト要素があります。

最初のテキスト要素の tspan 要素とそれぞれのテキストの両方を 2 番目のテキスト要素にコピーしたいと考えています。

私は次のことを試しました：

これにより、tspan 要素のテキスト コンテンツがコピーされ、他のコンテナーに配置されますが、tspan 要素は含まれません。したがって、その後は次のようになります。

2 番目のテキスト コンテナーを最初のコンテナーとまったく同じようにするにはどうすればよいですか?

ありがとう、クリストファー

SOで同様の問題を読んでも、この問題を解決できないようです。凡例とサブ凡例 (テキスト内の 2 つの tspan) を x 属性に合わせたいと思います (したがって、オースティンと詳細のサブ凡例は同じ x 位置から開始する必要があります。

https://jsfiddle.net/fef1xqdt/5/

私は tspans 間の空白が物事を台無しにすることを読みました...私は何も持っていません。両方の tspan に dx="0" を設定しても機能しない理由を本当に理解したいと思います。

svg chrome で RTL 文字を使用すると、おかしくなるようです。xまたはのy位置をさまざまな方法で尊重しません。for x0 は親の左ではないようです。また、y位置は の上下の順序が逆になっているようtspansです。

これは既知のバグですか? クロムで適切な RTL サポートを取得する良い方法はありますか? また、選択が RTL の正しい方向に選択されていないことにも気付きました。

FF 42 をテストしましたが、配置の問題がいくつかありxますが、縦方向の順序tspansは正しいです。また、選択は正しい RTL 方向にあります。

ここでjsfidle

私はこのコードを持っています:

これは私にこれを示しています：¥5,000.00

私が望むのは、次のように中国の国旗を見せてくれることです 。多くの方法を試しましたが、できません。1つは次のようなものでした：