0

DVI DOM要素をカプセル化するforeignObject SVG要素を使用して、SVGでテキストフローを実現しようとしています。私の問題は、どの CSS パラメータが設定されているかということなので、カスタムの fon-maily スタイルを使用できます。

次の手順を使用します。

0. For defined 'maximal-width' value :
1. Make a foreignObject at least max-width wide
2. Put a DIV element inside with some text and max-width : 'maximal-width' style.
3. Get it's size (width x height) and update the size of the foreignObject element in the end.
4. Make some SVG rectangle in the background with the same size as the text/foreignObject element.

期待される結果は、同じサイズのforeignObject要素にカプセル化されたラップされたテキストであり、背景には同じサイズのSVG長方形があります。

しかし

display : inline/inline ブロックを異なる font-family 設定と一緒に使用すると問題が発生します。

http://jsfiddle.net/zm7Xb/3/でいくつかの小さな例を作成し、Chrome を使用して適切な結果を得ました。 display : inline-block CSS とデフォルトのフォント。Helvetica を使用すると、DIV 要素が内部のテキストよりも幅が広くなります。google-font を使用すると、さらに悪い結果になります。

display の使用: inline は幅を修正しますが、誤った垂直サイズ (高さ) になります。デフォルトのフォントを使用している場合でも。

同じ結果でFirefoxでテストされました。

どこに問題があるのか​​わかりません。おそらく、この1つのsvg追加テキスト要素に関連しています-幅が間違っていますか? そしてもっと重要なこと：それを修正するにはどうすればよいですか？

4

1 に答える 1

2

多くの場所でサイズが不足しているため、サイズがないか、デフォルトで 300 x 150 ピクセルになっています。これはすべて適切な仕様に従っており、Chrome はいずれこれを適切に実装し、Firefox と一致するようになります。

まず、これらのスタイルをコードに追加する必要があります。

html, body {
    width: 100%;
    height: 100%;
}

#svg_container {
    width: 100%;
    height: 100%;
}

また、次のように svg 要素に幅/高さを設定する必要があります...

var svg = svgContainer.append("svg")
    .attr('width', "100%")
    .attr('height', "100%");

あなたにこれを与える

これにより、Firefox で欠落している 2 番目の foreignObject が解決されます。

期待するサイズが得られない理由については、フォントの読み込みは非同期であるため、必要なフォントが読み込まれる前にテキストを測定している可能性があります。フォントが読み込まれたかどうかを確認する信頼できる方法はないため、通常の方法は、テキスト サイズが変更されるまで定期的に確認することです。

于 2013-10-17T14:00:37.273 に答える