Svg 未在 Web 浏览器中显示阴影(Inkscape)

平面设计 网站设计 墨景 svg 出口 阴影
2022-01-30 16:53:10

我新创建了一个带有蒙版阴影的徽标,因此它们只会影响徽标本身,而不影响背景。这是一张图片: Inkscape 和 PNG 显示阴影

徽标的文本分为 3 个主要层:背面文本(G 和 A 以及 B 的顶部)、阴影(应用蒙版,因此它们不会超出文本)和正面文本(水平条和 B) 的底部。

但是,当我将它导出时Optimized SVG,Inkscape 仍然显示(前面文本的)文本阴影,但不是网络浏览器......怎么办?

这是 SVG 在浏览器上的样子:

Web 浏览器中的 SVG 不显示阴影

我玩过另存为设置(检查和取消检查组相似对象和减少组),没有任何效果......

请帮忙!

1个回答

感谢Yorik,找到了解决方案。

正如他所说,在 Web 浏览器上渲染时,阴影可能会造成麻烦。因此,您可以轻松地将它们替换为其他元素,而不会影响绘图的渲染。

这是替换阴影的解决方案:

  1. 复制创建阴影的对象
  2. 将其填充和描边颜色更改为全黑 (#000000ff)。这将是阴影。
  3. 设置其偏移量(通过向 X 和 Y 位置轴添加或减去值)
  4. 设置它的模糊
  5. 设置它的不透明度(模仿Shadow滤镜,应该在 50% 到 60% 左右)
  6. 放回一层

然后,如果你想模仿阴影遮罩(如上图),但使用Clipping(我发现更好),请执行以下操作:

  1. 复制将投射阴影的对象
  2. 将阴影对象放在顶部
  3. 选择两者,右键单击>Set Clip
  4. 创建阴影的对象放回顶部

我们去吧。阴影现在只会由您想要的对象投射此外,它还修复了Drop Shadow放置在矩形对象上时过滤器的错误。

再次感谢Yorik的解决方案!