問題タブ [linear-gradients]
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 - D3.js：linearGradientのストップを更新する
D3.jsを使用stopしてSVGの要素を更新しようとしています。linearGradientここで私の作業フィドルを見ることができます：http：//jsfiddle.net/nrabinowitz/C85R8/
私はデータの標準のD3パターンを使用しています-次のように、参加、入力、更新、終了します。
これは、ストップの最初の作成には問題なく機能します。しかし、更新しようとすると、.selectAll('stops')関数は作成された要素を見つけられないようです。フィドルでは、SVGを調べると、更新後に2セットの停止要素が表示されます（グラデーションの更新に失敗します）。
比較のために、テキスト要素を使用してほぼ同じコードを実行すると、完全に機能します。
更新時にコードが既存の停止要素を適切に選択しないのはなぜですか？d3.selectこれはSizzle.jsのバグですか？
css - CSS3線形グラデーションの場合、Rなどの1つだけを考慮すると、R、G、Bコンポーネントは線形に変化しますか？
CSSで線形グラデーションを定義していて、それがグラデーションとして画面に表示される場合、赤の値は一定の割合で変化しますか。（つまり、グラデーションの全長にわたる赤色の微分定数です）。緑と青の色成分についても同じ質問です。
グラデーションは、任意の色から他の色までです。たとえば、1つの色は＃FF4400で、もう1つの色は＃5599FFです（ランダムな色のみ）。赤の成分は直線的に変化しますか？
私はCSS3線形グラデーションについて言及しています。1つの例はここにあります：http：//dev.opera.com/articles/view/css3-linear-gradients/
google-chrome - Google Chrome での固定位置と線形グラデーションの問題
線形グラデーションの背景を持つ固定 div が必要です。すべてのブラウザーで、背景は常に div 内の適切な場所にあります。代わりに、Google Chrome (23.0.1271.52 beta-m) では、div コンテンツは固定されたままですが、背景はページに沿ってスクロールします。
これを Firefox で見てから Chrome で見てください: http://jsfiddle.net/h3WNk/
使用してみbackground-attachment: fixedましたが、この方法ではグラデーションがまったく表示されません。
絶対配置を使用すると機能するようですが、ユーザーがページをスクロールしても、ページの左下隅に div を固定する必要があります。
html - Mozilla Firefox の線形勾配アーティファクト
Mozilla Firefox 16 の線形グラデーションに問題があります。
スクリーン ショーで悪いことが表示されます (悪い - ブロックの下部にある薄い線)。
コード：
そしてCSS部分：
スクリーンショットの line-height プロパティを変更しました。
誰かがそれが何であるか、そしてそれを隠す方法を説明できますか?!
ありがとうございました。私の英語でごめんなさい。
google-chrome - ChromeでのSVG線形グラデーションの丸め誤差?
最近、Chrome で SVG 線形グラデーションをレンダリングする際に問題が発生しています。以下の SVG を見てください。
この html を Chrome にロードした後 (私のバージョンは 23.0.1271.64 です)、ピークで線形グラデーションの 2px のエラーを明確に確認するのは非常に簡単です。これは、左側の線分に緑色を示しています。IE 9 と最新の Firefox の両方で、svg は正しくレンダリングされます。おそらくChromeかWebKitのバグだと思います。回避策を知っている人はいますか？ありがとう！
css - CSS3リニアガディエントが機能しない
CSS3を使用して色効果を作成するこのCodePen デモを見ました。同じプロパティを jsFiddle で試しましたが、この CSS3 プロパティは機能しませんでした。linear-gradientlinear-gradient
これがCodePen コードで、これが私のjsFiddle コードです。
これの背後にある問題は何か、またはjsFiddleの障害などがあることを誰かが説明できますか?
internet-explorer - IE 7-10 用のマルチストップ線形グラデーション
フィルターと PIE を使用した単純なグラデーションについてはよく知っていますが、同じツールを使用して複数のストップ/スタート グラデーションを作成するにはどうすればよいでしょうか?
css - CSS グラデーション カラーは、ピクセル単位で端から停止します
私は、アプリが固定サイズで、デザインに基づいて要素を正確に配置する必要がある HTML/CSS/JS プロジェクトに取り組んでいます。ウィンドウ サイズが固定されているため、CSS でピクセル サイズを簡単に操作でき、ブラウザーのサイズ変更を気にする必要がありません。また、IE や Opera について心配しないという贅沢もあります。アプリは Webkit と Firefox でのみ動作する必要があります。
いくつかの場所で、特定のピクセル数にグラデーションの背景を適用する必要があります。これは、次のようなもので簡単に達成できます
(およびその-webkit-と-moz-対応するもの。) これは、ほとんどの要素でうまくいきます。ただし、カラーストップの上下のピクセル位置が必要な場所がいくつかあります。これらがパーセンテージポイントである場合、次のような方法で実行できます。
(グレーから 60 ピクセル以上で黒、次に透明になり、最後の 10% で黒からグレー)。ただし、問題の要素のサイズは時間によって異なるため、ピクセルで同じことを達成する必要があります。必要に応じて、動的に計算されたさまざまなパーセンテージ ポイントで JS を使用してグラデーションを再適用する必要はありません。
それで、私の質問: 最後からカラーストップx ピクセル(パーセンテージではない)を指定する方法はありますか?
javascript - JavaScript 使用時の動的 SVG 線形グラデーション
たとえば、html 本文内でこれを正常に機能させることができます...
ただし、javascript を使用してこれを動的に作成する必要があります。円だけを作成しても問題なく動作します。円の Fill を lineargradient に向けると、失敗します。黒い円が表示されます。
stop 'style' 属性を正しく設定していないと思います。役に立たない別の方法を試しました。以下を参照してください...
Chrome を使用しています。よろしくお願いします。
body タグ内:
css - 複数のブラウザ用のCSS3グラデーション
このCSS線形グラデーションはFirefoxで機能していますが、Safariや他のブラウザで同じ結果が得られないようです。接触フィールドの背景のような紙です。全身と特定の要素を試しましたが、スタイルはFirefoxでのみ機能するようです。-webkit-と-moz-を使用してみましたが、うまくいきませんでした。何か案は？