svg-filters相关内容

使用CSS和SVG滤镜模拟Photoshop RGB级别

我以前也这样做过,我知道它的存在,但由于某种原因,我现在找不到它(浪费了几个小时,但没有成功)。 我要通过CSS模拟PhotoshopRGB级别。 在下图中,我将中间值从1更改为0.5。 我希望获得与css相同的效果(或至少尽可能接近)。 我尝试了以下代码:https://jsfiddle.net/txwu3so5/ 我需要找到一些替换代码才能达到这种效果。实际代码会 ..
发布时间:2022-09-04 14:25:46 前端开发

使用 SVG 进行加色混合(加色混合)

来自平面设计背景,我知道如何通过作弊来创造加色.另一篇文章中提出了相同的基本解决方案这里. 上面的帖子指的是透明的 .png 文件,但概念是相同的.我想创建的基本效果就像如图. 我很想在 SVG 中做它,这样它可以缩放,这样当我谈论一个给定的主题时(假设主题是“绿色")我可以放大图形的那部分和重叠区域仍会正确显示. 这些帖子似乎非常接近: RGB 值的加色混合算法 关于“ ..
发布时间:2021-12-30 19:03:07 其他开发

如何在 SVG 中制作插入阴影

我需要制作一个带有内嵌阴影的框,就像 CSS3 有内嵌框阴影一样.到目前为止,我发现的是一个带有 feGaussianBlur 的过滤器,但问题是它还在框外添加了一个阴影,这是我不想要的.这是我目前得到的代码: ..
发布时间:2021-12-17 18:22:00 前端开发

为什么色相旋转 +180deg 和 -180deg 不会产生原始颜色?

通过阅读 HSL/HSV 色彩理论,我的印象是色调分量是一个循环属性,每 360 度重复一次,可以独立于饱和度和亮度/值进行更改.如果我错了,请纠正我,但这些陈述在逻辑上遵循先前的定义: 将色调旋转 360 度会产生相同的颜色 将色调旋转 180 度两次会产生原始颜色 先将色调旋转 180 度,然后再旋转 -180 度会产生原始颜色 然而,只有选项 1 是正确的.将色调旋转 4 次 ..
发布时间:2021-12-17 18:03:35 其他开发

使用 css3 的 SVG 投影

是否可以使用 css3 为 svg 元素设置阴影,例如 box-shadow: -5px -5px 5px #888;-webkit-box-shadow: -5px -5px 5px #888; 我看到了一些关于使用滤镜效果创建阴影的评论.有没有单独使用css的例子.下面是一个工作代码,其中正确应用了 cusor 样式,但没有阴影效果.请帮我用最少的代码得到阴影效果. svg .sha ..
发布时间:2021-12-01 16:52:14 前端开发

我可以只在图像部分应用 CSS 过滤器吗?

我有一个全屏背景图片 .bg {左:0;最小高度:100%;最小宽度:100%;位置:固定;顶部:0;z-索引:-1;} 想应用一个CSS滤镜,我个人想用一个模糊效果,和我身体一样的位置 .container {边距:0 自动;宽度:1000px;} 这是一个例子: 我想在模糊的容器上书写文字. 解决方案 http://jsfiddle.net/QvSng/6/ CSS ..
发布时间:2021-09-23 19:29:29 前端开发

SVG:一个过滤器中的多种效果

我正在尝试在单个 SVG 过滤器中实现多个阴影,但我相信我的问题比这更通用:如何将多个效果添加到单个 SVG 过滤器中?在我的案例,这就是我想要做的. 我有一个当前包含单个路径元素的 SVG 文档,并且我对这个路径元素应用了一个阴影效果. 我的 SVG 文档 ..
发布时间:2021-09-01 19:16:36 其他开发

SVG 在 Firefox 中完全不可见

在将其标记为重复之前:我们已经确保正确设置了宽度和高度.我将其表述为不可见,因为尽管它占用了正确的空间,甚至在图像上加载了正确的尺寸,但在网站、网络选项卡和直接查看 SVG 时,图像的内容是空的.基本上,无论我们如何显示或查看,实际的 SVG 都是不可见的. 我们想在我们的网站上展示一个 SVG.它适用于 Chrome、Edge 等,但不适用于 Safari 和 Firefox.我们最初认为 ..
发布时间:2021-09-01 19:12:42 前端开发

Safari 定位 SVG feSpotlight 过滤器麻烦

我想使用聚光灯效果,但它似乎只能在 Chrome 中工作,在 Firefox 中看起来“还可以",但在 Safari 中无法定位 (x,y,z).(其他浏览器未测试) 我尝试了不同的过滤器和原始单元,虽然这有所不同,但 Safari 似乎仍然无法在任何情况下定位照明效果. 为了了解正在发生的事情,我尝试了很多解决方法,包括不同的 userSpaceOnUse/objectBoundin ..
发布时间:2021-07-14 19:27:04 其他开发

SVG过滤器未在Firefox中显示,在Chrome中工作正常

我希望在深色背景上的一段深色文字在其外部具有白色发光.尽管默认投影滤镜在CSS中(例如 filter:drop-shadow(2px 2px 2px black))正式应该支持'spread-radius'第四个属性,基本上不存在对此属性的支持.没有这种额外的扩展,投影的阴影将不足以允许阅读文本. 因此,我决定在SVG标签中定义自己的过滤器,包括执行扩展操作的扩展操作,然后将其应用于文本.该 ..
发布时间:2021-05-08 18:57:38 前端开发