SVG梯度实现

是否可以在SVG中重新创建这种模糊的渐变？

svg gradient

— 贾里德·加西亚（Jared Garcia）
source

Answers:

是的，没有。

可以在Inkscape中创建渐变网格，并将其另存为SVG。但是，浏览器中使用的SVG标准尚不支持渐变网格。将来可能会改变，但目前没有。

在浏览器中有效的另一种方法是添加多个实体对象，对其进行模糊处理，然后将其放入剪贴蒙版中。这仍然是纯矢量解决方案，未栅格化。

如果需要，这是在浏览器中可用的版本的SVG。

编辑：SVG的上述链接不再可用，因此我已将其删除。

— 比利·克尔
source

这很酷！链接中的SVG看起来不像您的答案中提供的插入内容，但是...看起来要轻得多。有什么原因吗？

— 贾里德·加西亚

@JaredGarcia我不知道为什么-我的屏幕截图与Inkscape中的计算机上的SVG完全匹配-但请确保您使用的是Inkscape的最新版本-现在为0.92版

— Billy Kerr，

啊，我是直接从该下载链接在移动设备上的浏览器中查看的。我将在Inkscape中将其打开并签出。

— 贾里德·加西亚

@JaredGarcia将其发布为新问题，以便可以正确回答。

— Andrew T.

浏览器中的模糊确实非常昂贵。您可以通过对背景渐变进行分层来获得相同的效果。这些甚至是可动画的。而且，您可以使用background-blend-mode在现代浏览器中获得额外的效果。

— PieBie

可以在Illustrator和Inkscape中将其制成渐变网格。在旧版Illustrator中另存为SVG时，它转换为位图图像。显然，Illustator大约在6年前就知道了，但是SVG语言却没有。

当在Inkscape中保存为普通SVG而不是Inkscape SVG时，它以渐变网格的形式保持不变，并使用文本编辑器打开SVG文件，显示出命令meshgradient。参见代码片段

因此，在不了解标准的情况下，我可以说“它至少是在Inkscape的普通SVG中实现的”。

希望有人知道SVG开发状态的程序员讲的准确。

— 用户名
source

您可以在此处以正确的代码格式直接包含代码。无需发布屏幕截图。

— Wrzlprmft

遗憾的是，Google Chrome或Firefox还不支持Inkscape的渐变网格。

— 比利·克尔

您可以发布svg代码吗

— 贾里德·加西亚

@JaredGarcia我没有。我仅填充了25个节点中的10个，以查看其外观是否正确。您可以自己制作。将图像导入Inkscape，制作一个相同大小的正方形，设置其填充类型=渐变网格，使用网格工具添加3行和更多列，使用节点工具一个接一个地选择节点，并使用颜色选择器选择颜色从导入的图像。另存为普通SVG，在Win记事本中打开以查看代码。

— user287001

如果您的目标是拥有轻量级，可缩放的网格渐变，则可以尝试以下方法：

https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html

它不是矢量，但也可能是因为文件大小非常小，并且图像可以无限缩放。

— 彼得里
source

欢迎到能源办 - GLAF有你在这里！请环游一下，了解我们想问“ 如何问”和“ 如何回答”的问题。在查看帮助中心时，也可能要查看总体行为代码，这对于您共享的适用性而言是一个很好的答案，但是在GDSE，我们更喜欢使用链接作为参考。或绑定资源，因为链接很容易更改或消失：请问您可以在要回答的内容中总结要链接的内容吗？

— GerardFalla