问题标签 [svg-filters]

问问题

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.

581 问题
Newest
Active
Bountied
318
Unanswered
0 投票
2 回答
1612 浏览

svg - 如何将 feTurbulence 过滤器应用于形状 - 例如 SVG 中的圆形

我有以下 SVG 代码：

而且我得到了我想要的大部分内容，但由于某种原因，我无法弄清楚如何将过滤器仅应用于圆圈 - 它总是将其应用于边界框加上 10%。我可以求助于剪裁，但更愿意学习如何将过滤器仅应用于我想要影响的形状......

注意它不一定要合并，我也尝试过没有太多运气的复合 - 我只想要最有效的方法来将过滤器应用于形状而不进行裁剪 - 如果可能的话。

0 投票
1 回答
4052 浏览

css - 图像转灰度 (SVG) 问题

一直在尝试将图像转换为灰度并在悬停时恢复正常-查看将图像转换为 HTML/CSS 中的灰度

对于正常的过滤器使用，在 IE 中一切正常，但是 Firefox 中的 SVG 方法并不顺利。我的页面都位于站点的根目录中，然后是 /SiteStyles/Styles.css 中的样式表，我在其中调用 .homeCaseStudyImage img {filter:url(filters.svg#grayscale);

我的 filters.svg 也位于 /SiteStyles 目录中。看起来像这样：

我知道这对其他人有用，所以我猜这与我的文件夹结构有关，或者可能与 SVG 无关？

任何帮助表示赞赏

0 投票
4 回答
41626 浏览

svg - 如何使用 svg 在矩形周围创建“发光”？

我有以下内容：

我想在这个周围创造一个白光。

有什么方法可以在 svg.js 中做到这一点。我环顾四周，我能找到的只是“阴影”，这并不是我真正想要的，因为我想要在矩形的所有四个边周围都有一个阴影（发光）。

0 投票
3 回答
1387 浏览

browser - 对 svg 过滤器的功能检测支持

我需要检测浏览器是否支持 svg 过滤器（具体来说是 feGaussianBlur）。我将如何进行测试？不支持过滤器的 Safari 会默默地忽略过滤器。

0 投票
1 回答
164 浏览

browser - SVG滤镜继承

根据这些消息来源：

SVG元素可以通过属性filter从另一个过滤器继承。xlink:href问题是我无法在 Chrome 19 和 FF 10 中运行我的代码。我的测试代码可以在下面的小提琴中找到。我已经尝试过使用和不使用url(...). 我做错了什么还是该功能还没有实现？

小提琴： http: //jsfiddle.net/WJafz/（另一个红色斑点应该出现在右下角）

0 投票
2 回答
5812 浏览

javascript - 如何在 JavaScript 中向 SVG 对象添加过滤器？

我正在尝试使用 JavaScript 创建 feGaussianBlur 过滤器并将其添加到 SVG 矩形，并使用此代码作为参考。我得到一个矩形，但它没有被过滤。我究竟做错了什么？

我正在尝试这样：

0 投票
1 回答
1075 浏览

svg - 将两个 SVG feColorMatrix 滤镜效果合并为一个矩阵？

我正在使用 SVG 过滤器在一些复杂的路径上创建模糊的“阴影”类型效果。

feColorMatrix我纯粹通过反复试验得出了上述值。（如果我单独使用矩阵数学，我永远不会想出一种从暗到亮的特别美丽的色调变化。）基本上，我将色轮旋转 340 度，然后我正在饱和颜色使用值 3，就在模糊之前。（过去的规范对此有些不清楚，但反复试验表明，大于 1 的type="saturate"值会使图像饱和，小于 1 的值会使图像去饱和。）

这就是问题所在：我正在迭代大量路径，双矩阵运算使我的机器停止运行。它经常崩溃。

一些矩阵数学大师可以帮我计算出将上面的两个 feColorMatrix 过滤器组合成一个更有效feColorMatrix的 type="matrix" 过滤器原语的数字吗？我得到了规范的要点，但我在数学方面有点不知所措。

0 投票
1 回答
1127 浏览

svg - 为什么过滤器会破坏半像素技巧以获得清晰的 1px 笔画？

我正在使用该问题的第二个答案中讨论的“将所有内容偏移半个像素”技巧来在形状上获得清晰的 1px 笔划。

（涉及到圆形边缘，因此shape-rendering: crispEdges解决方案在这里不可行 - 它使笔划的弯曲部分看起来很糟糕。）

添加过滤器（我使用高斯模糊+偏移过滤器来实现投影）如何打破半像素偏移黑客？

你可以玩jsfiddle。

显然我不能以新用户的身份发布内联图像，但你可以这是 svg 如何为我寻找的图像。

0 投票
2 回答
6291 浏览

css - 没有svg文件的Firefox和Opera中的亮度过滤器

对于我当前的项目，我使用了过滤器 -webkit-filter: brightness(-20%);-moz-filter: brightness(-20%); 但是不知何故，这个过滤器在 firefox 和 opera 中不起作用（我也有 opera 前缀）。我发现了如何使用它，但我需要将亮度过滤器转换为 svg 代码。有什么想法我该怎么做？
我必须做的是一个小画廊，图像变暗，悬停时有普通图像，不使用 2x 图像。

0 投票
0 回答
878 浏览

svg - 为什么 SVG 滤镜效果在 Mac OS 上的 Firefox 中模糊？

似乎 SVG 滤镜效果在 Mac OS 上的 Firefox 中呈现出奇怪的效果。我在尝试为具有 1px 笔划的形状实现投影时遇到了这个问题。我在 Javascript 中进行了一些像素捕捉以及 0.5px 的偏移，这使得 1px 的笔画呈现清晰，只要没有阴影。

但是，当我使用滤镜效果应用投影时，形状会变得模糊，但仅限于 Mac OS 上的 Firefox（我在 Mac OS 和 Linux 上尝试过 Firefox 和 Chrome）。

这是一些示例代码：

svg 在 Linux 上的 Firefox 中看起来不错：（对不起，我不能作为新的 SO 用户发布内联图像）

http://i.imgur.com/czKP2.png

在 Mac OS 上的 Chrome 中也是如此（我只能以新 SO 用户的身份发布 2 个链接，因此没有指向屏幕截图的链接，但它本质上是相同的），但rect在 Mac OS 上的 Firefox 中应用了滤镜效果的 s 是模糊的：

http://i.imgur.com/7WxI8.png

我尝试了几次调整都无济于事，包括：

  • 使用feBlendorfeComposite代替feMerge
  • 达到filterRes破坏浏览器的高值

有任何想法吗？

（抱歉，没有包含一个工作演示——我试图创建一个 jsfiddle，但它并不能真正正常工作，因为当 SVG 像 jsfiddle 那样在框架中时，像素捕捉 Javascript 代码不起作用。）


12345678910