web-dev-qa-db-ja.com

SVGはレンダリングされますが、Firefoxでのみ切断されます-なぜですか？

SVGを使用するd3jsを使用してグラフを作成しています。 www.uscfstats.com/deltasで表示してください（入力値として12842311を使用してください。現在、非常にハッキングされています）。

Chrome、Safari、Firefox 10では、これにより期待どおりに完全なグラフが表示され、白いボックス全体が表示されました。ただし、Firefoxのそれ以降のバージョン（具体的には15）では、SVGレンダリングの上位200ピクセル程度ですが、残りは切り捨てられます。

Firebugでページを開くと、HTML要素を強調表示でき、それらがすべてそこにあるように見えます。まるで、大きな白いボックスがグラフの下75％を覆っているようです（そのようなHTMLはありません）。ただし、要素）。ドットにクリックイベントがあり、レンダリングされたものをクリックできますが、見つからないものをクリックしても何も起こりません。

私は書くことによって問題を修正しました

var svg = d3.select("#scatterplot").append("svg").attr("width", "100%").attr("height", "100%");

なぜこれが機能し、何が起こったのですか？

javascriptfirefoxsvgcross-browserd3.js
21
Andrew Latham

何が起こったのかというと、svgサイジングがどのように機能するかについての仕様が明確になり、さまざまな場合にうまく機能するようになり、Firefoxが更新されて更新された仕様を追跡しました。特に、<svg>は、あらゆる種類の状況で失敗する自動魔法のことを試みる代わりに、他のCSS置換要素と同じサイズになりました。

特に、幅と高さの属性の欠如は、CSSで実際に幅や高さを設定することで実際にうまく機能しなかったことを除いて、両方を100％に設定することと同じように扱われていました。問題。したがって、現在の動作では、幅と高さを設定すると、それらはプレゼンテーションのヒントのように扱われ（<img>の幅と高さの属性と同じように）、そうでない場合は、デフォルトの300x150の組み込みサイズを取得できます。必要に応じてスタイルルールで上書きします。

18
Boris Zbarsky

Firefoxでは、使用している単位を定義する必要があります：px、%など

したがって、以下は私にとってはうまくいきませんでした：

var width = 800,
    height = 600;

var el = d3.select('#d3_element')
    .style('width', width)
    .style('height', height);

しかし、以下は機能しました：

var el = d3.select('#d3_element')
    .style('width', width + 'px')
    .style('height', height + 'px');
2
RobotEyes

私も同じ問題に直面していました

.attr("width", window.innerWidth).attr("height",window.innerHeight)

私のために働いた。

2
Amit

また、innerWidthやouterHeightなどの変数名を使用していないことを再確認してください。それが私の場合の問題でした。 IE9とChromeは問題なくレンダリングされますが、Firefox（33.0）はおかしくなります-おそらくバグです。

0
Ayush

不思議なことに、「100％」は幅では機能しましたが、高さでは機能しませんでした。両方をinnerWidth/innerHeightに設定しました。 CentOS6上のFirefox31.0。ご参考までに

0
dado

Svgをflexコンテナに挿入し、プロパティflexを追加します：auto; svgにわたしにはできる

0
Радислав Ялилов