问题标签 [radial-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.

0 投票
1 回答
1191 浏览

svg - Applying an SVG Radial Gradient Mask to Multiple Items

I have a number of differently colored and sized svg circles that I would like to apply a radial gradient mask to. Is there a way to define a single mask that is applied to each circle by stretching it to match that circle's size?

Here is what I've come up with so far:

The issue is that the percentage radius in the mask/circle doesn't seem to be measured relative to the size of the circle the mask is being applied to.

Is there a way of doing this without needing to define a new mask for each item I apply it to?

0 投票
1 回答
1036 浏览

css - CSS3 径向渐变显示为线

我一直在尝试创建径向背景,但由于某种原因,我只能得到一条线。我不知道我做错了什么,有什么想法吗?

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

CSS:

0 投票
1 回答
1294 浏览

android - 在运行时设置渐变半径并以按钮为中心

像这里列出的许多其他帖子一样,我与径向渐变作斗争。发布1 , 2 , 3 ...

我想要两件事:

  1. 在具有选择器的按钮周围设置渐变作为背景可绘制以获得光环效果
  2. 调整此渐变半径以获得与屏幕分辨率/尺寸无关的相同感觉。

到目前为止我所做的: 解决方案1

我尝试实施几种解决方案。我在这里展示了我的 2 次最佳尝试。我将带有渐变的可绘制对象设置为按钮周围的封闭布局的背景。这满足了第 1 点)

这是我的@drawable/custom_background

到目前为止我所做的: 解决方案2

效果不错,但android:gradientRadius="180"必须针对每个屏幕进行调整。帖子 1 提供了一些解决方案,我尝试自定义布局和视图,但我遇到了崩溃。某些配置没有失败(背景设置为根布局,但在这种情况下从未调用过 onDraw)。

自定义视图:

这个观点在这里:

这些是失败:使用堆栈和实习生堆栈膨胀片段时出错:

你能帮我做吗?非常感谢!

编辑:有人?

0 投票
1 回答
237 浏览

google-chrome - 为什么这种拉斐尔辐射填充坐标的组合会失败?

使用 Raphael,我注意到如果我尝试在使用 0.9 和 0.2 作为径向焦点的圆上应用径向填充,则无法绘制径向填充。

我在这里设置了一个小提琴,并做了一个 10x10 的网格,并且 (0.9,0.2) 是唯一失败的。

我想了解为什么。 http://jsfiddle.net/ENMry/2/

0 投票
1 回答
245 浏览

html - 在 IE9 上以径向方向渲染 CSS3 渐变

我使用 Colorzilla 渐变生成器(http://www.colorzilla.com/gradient-editor/)为我的网站创建径向渐变,我希望在底部有椭圆。

所以我将每次出现的center更改为bottom,然后我成功地生成了一个椭圆位于底部的径向渐变。

但是在 IE9 中它无法渲染底部椭圆,然后我发现下面的代码也需要修改:

那么有没有办法修改代码(Data URI)以使椭圆位于底部?如果不可能,我怎样才能让椭圆位于底部?任何想法将不胜感激。

0 投票
2 回答
6563 浏览

html - 我可以使用 CSS 将径向渐变“叠加”设置为 div 吗?

这是我用来在我的网站上为 div 提供径向渐变“白光”效果的图像示例。

在此处输入图像描述

目前该图像被设置为 div 背景 - 它大约 338KB 大,这在网络术语中是不可接受的。它非常大!

假设我的 div 有类似的东西:

我可以应用径向背景将这种白色覆盖在上面以达到类似的效果吗?

我不打算支持 IE9 和更低版本,所以任何适用于现代浏览器和现代移动浏览器的东西对于我的用例来说都是 A-OK。

0 投票
3 回答
664 浏览

ios - 如何在同心圆上绘制效果(具有金属光泽的光泽),例如以下?

我参考了以下文章。我实际需要绘制的是同心圆/具体圆,其效果如下图所示。

在此处输入图像描述

我发现很难 a) 径向绘制白色条纹 b) 找到一些关键术语来搜索相关文章以进一步进行此操作。

任何阅读此内容的提示或链接都会有很大帮助。

0 投票
0 回答
210 浏览

jquery - 渐变在jQuery中不起作用

这是代码:

现在,所有这些在桌面浏览器上都可以正常工作,但在 android 浏览器和 IOS 浏览器上,颜色不会改变。然而,经过一番摆弄后,我发现如果我把 web-kit 属性放在最后,它在移动平台上可以正常工作,但是它在桌面上的 Firefox 中不起作用:(。有什么想法吗?

0 投票
1 回答
818 浏览

ios - 绘制从红到蓝的径向渐变

我需要绘制一个以红色开头并以蓝色结尾的渐变圆。它应该看起来像这个

这里解释了如何创建这样的圈子。但我不知道如何绘制这样的渐变。问题是开始颜色和结束颜色混合在一起。你能帮助我吗?

0 投票
1 回答
3481 浏览

d3.js - D3.js 中弧的径向渐变

我从这个例子中看到,如何使 D3.js 中的弧线从弧线的一端到另一端具有一维渐变。我还想应用从内环到外环的径向渐变。这可能吗?