問題タブ [radial-gradients]

放射状グラデーション マスクを適用したい色とサイズの異なる SVG 円が多数あります。その円のサイズに合わせて引き伸ばすことによって、各円に適用される単一のマスクを定義する方法はありますか?

これが私がこれまでに思いついたものです：

問題は、マスク/円のパーセンテージ半径が、マスクが適用されている円のサイズに対して測定されていないように見えることです。

適用するアイテムごとに新しいマスクを定義する必要なく、これを行う方法はありますか?

放射状の背景を作成しようとしていますが、何らかの理由で取得できるのは線だけです。私は何が間違っているのか分かりません。何かアイデアはありますか?

Jsfiddle: http://jsfiddle.net/3QSFj/1/

CSS:

ここにリストされている他の多くの投稿と同様に、放射状グラデーションに苦労しています。投稿1、2、3 ...

私は2つのことをしたい：

1. オーラ効果を得るために、背景のドローアブルとしてセレクターを持つボタンの周りにグラデーションを設定します
2. このグラデーション半径を調整して、画面の解像度/サイズとは無関係に同じ感覚を持たせます。

これまでに行ったこと： 解決策1

周りにあるいくつかのソリューションを実装しようとしました。私はここに私の2つのベストトライを示します。ボタンの周りを囲んでいるレイアウトの背景に、グラデーション付きのドローアブルを設定しました。それはポイントを満たします 1)

これは私の@drawable/custom_background

これまでに行ったこと： 解決策2

効果は良好ですがandroid:gradientRadius="180"、画面ごとに調整する必要があります。投稿 1 はいくつかの解決策を提供し、レイアウトとビューをカスタマイズしようとしましたが、クラッシュしました。一部の構成は失敗しませんでした (バックグラウンドをルート レイアウトに設定しましたが、この場合は onDraw が呼び出されませんでした)。

カスタマイズされたビュー:

そして、このビューはここに行きます:

これらはfail : エラーで、スタックとスタックのインターンエラーでフラグメントを膨らませます:

それをするのを手伝ってくれませんか？どうもありがとう！

編集：誰か？

Colorzilla グラデーション ジェネレーター ( http://www.colorzilla.com/gradient-editor/ ) を使用してサイトの放射状グラデーションを作成し、下部に楕円を配置したいと考えていました。

から

に

そのため、すべてのcenterをbottomに変更し、下部に楕円を配置して放射状グラデーションを正常に生成しました。

ただし、IE9 では下の楕円のレンダリングに失敗し、以下のコードも変更する必要があることがわかりました。

コード（データURI）を変更して下部に楕円を作成する方法はありますか？無理なら楕円を一番下に置くにはどうすればいいですか？どんな考えでも大歓迎です。

以下の記事を参考にしました。実際に描く必要があるのは、下の画像に示すような効果のある同心円/コンクリート円です。

a) 白いすじを放射状に描く b) 関連記事を検索するための重要な用語を見つけて、これをさらに進める。

これについて読むためのヒントやリンクは非常に役立ちます。

この例から、D3.js でアークを作成する方法が、アークの一方の端からもう一方の端まで 1D グラデーションを持つようになることがわかります。また、内輪から外輪に向かって放射状のグラデーションを適用したいと思います。これは可能ですか？