SVG阴影-不透明度，feOffset和viewBox困难 [英] SVG Drop Shadow - opacity, feOffset and viewBox difficulties

问题描述

我想对SVG文件应用简单的阴影.因为这确实是我第一次接触SVG滤镜，所以我被困住了，找不到以下问题(可能很简单)的解决方案:为什么feColorMatrix不应用于阴影?

I want to apply a simple drop shadow to an SVG file. As this is really my first dive into SVG filters, I am stuck and can't find a solution for the (probably simple) problem: Why is the feColorMatrix not being applied to the shadow?

以下是过滤器:

<defs>
  <filter id="drop-shadow" filterUnits="userSpaceOnUse" width="120" height="120">
    <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="1" />
    <feOffset in="blur-out" result="the-shadow" dx="0" dy="1"/> 
    <feColorMatrix in="the-shadow" result="color-out" type="matrix"
      values="0 0 0 0   0
              0 0 0 0   0 
              0 0 0 0   0 
              0 0 0 0.1 0"/>
    <feBlend in="SourceGraphic" in2="the-shadow" mode="normal"/>
  </filter>
</defs>

此外，FireFox是否有可能忽略feOffset?还是语法有问题?

Also, is it possible that FireFox ignores feOffset? Or is there something wrong with the syntax?

Plus:在所有浏览器中，阴影似乎都在顶部和左侧被剪切掉了. svg(在img标记中)大22px x 22px，我已经放大了viewBox:

Plus: In all browsers, the drop shadow seems to be clipped off at the top and on the left side. The svg (in an img tag) is 22px x 22px big and I already enlarged the viewBox:

<svg version="1.1" id="Layer_1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
  y="0px" width="22px" height="22px" viewBox="0 0 24 24" enable-background="new 0 0 24 24"
xml:space="preserve">

但是仍然没有运气.在我的CSS文件中，img没有设置宽度或高度，所以我认为它与SVG有关.

But still no luck. In my CSS file the the img has no set width or height, so I believe it has something to do with the SVG.

推荐答案

1)您的过滤器区域可能太小.您可以放大默认值(尽管默认值:(-10％，-10％，120％，120％)通常足以容纳常规阴影.)

1) Your filter region is probably too small. You can enlarge the default values (although the default values: (-10%, -10%, 120%, 120%) are usually enough for normal drop shadows.)

2)另外-正如罗伯特提到的-您的最终滤波器未正确接线.

2) Also - as Robert mentions - your final filter is not wired up correctly.

这里是一个似乎可以在浏览器中一致工作的版本-夸张了，所以您可以清楚地看到.

Here is a version that seems to work consistently cross browser - exaggerated so you can see clearly.

  <filter id="drop-shadow" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="2" />
    <feOffset in="blur-out" result="the-shadow" dx="0" dy="5"/> 
    <feColorMatrix in="the-shadow" result="color-out" type="matrix"
      values="0 0 0 0   0
              0 0 0 0   0 
              0 0 0 0   0 
              0 0 0 .5 0"/>
    <feBlend in="SourceGraphic" in2="color-out" mode="normal"/>
  </filter>
</defs>

这篇关于SVG阴影-不透明度，feOffset和viewBox困难的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！