关于CSS3：如何通过CSS将阴影过滤器应用于SVG特定元素/路径


How to apply drop-shadow filter via CSS to SVG specific element/path

我想通过CSS将阴影过滤器应用于通过CSS内联放置的SVG中的特定元素/路径，我不需要整个图形都被阴影化，只需其中的一个元素即可。

1
2
3
4
5
6
7
8
.shadow {
  fill: red;
 
  -webkit-filter:
    drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
          filter:
    drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
}
1
2
3
4
5
6
7
8
  <svg height="150" width="150">
    <g>
<path d="M0,0 C-72,132 -72,-26 100,100"></path>
    </g>
    <g class="shadow">
    <circle class="shadow" cx="100" cy="100" r="20"></circle>
    </g>
  </svg>

如您在上面看到的，我正在尝试向SVG的红色圆圈元素添加阴影，但是它不起作用。

到处搜索时，我还没有找到任何具体的信息，在其他与SVG相关的问题中，只有很少的评论仅仅说明它不适用于单个SVG元素，但没有太多解释。

更新

正如@azeós在评论中指出的那样，它可以使用Firefox(v。43.0.2)正确呈现，因此这是Chrome特有的问题。 无论如何，是否要使此跨浏览器不摆弄注释中所建议的SVG代码？

相关讨论

2018年3月更新：我对此问题进行了一些实验，因为我也找不到任何信息，并且结果非常不一致。 TL; DR版本，如果您将要使用polyfill或只是在SVG中创建阴影。

Codepen实验：
http://codepen.io/staypuftman/pen/GoNoMq

Chrome 65 + Canary 67：

在SVG对象下拉阴影的上下文中，Chrome和Edge Canary都没有正确地尊重filter或-webkit-filter，但是只能在简单的div上工作。

enter image description here

Firefox 58 / Quantum + Firefox 53：

SVG和HTML对象看起来都不错。

enter image description here

Safari 10.1以上

Safari在10.1(也许是10.0)系列中解决了此问题。

enter image description here

Safari 9.x

SVG CSS dropshadow不显示，并且div dropshadow由于某些原因具有较小的不透明度

enter image description here

IE11

没有。

enter image description here

相关讨论

您可以通过在要阴影的对象上进行颜色选择，创建阴影然后将其合并到原始图形下来有选择地应用阴影。但是您必须通过CSS过滤器中的SVG过滤器陷门来完成此操作-在IE中不起作用。 (所以... hacky，但可能)

规格在这里：w3.org/TR/SVG11/filters.html#feColorMatrixElement

演示玩具在这里：
https://beta.observablehq.com/@gitmullany/filter-effects-using-svg-color-matrices

该矩阵将所有红色值的不透明度加倍，将所有其他值的不透明度清零，然后减去1。其效果是仅将事物保留为rgb(255,0,0)的不透明度为100％

1
2
3
4
5
6
7
#mySVG {
   filter: url(#selective-shadow);
}

.shadow {
  fill: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<svg>
 <defs>
   <filter id="selective-shadow">
     <feColorMatrix type="matrix" values="0 0 0 0 0
                                          0 0 0 0 0
                                          0 0 0 0 0
                                          2 0 0 0 -1"/>
     <feGaussianBlur stdDeviation="3"/>
     <feOffset dy="2" dx="2"/>
     <feMerge>
       <feMergeNode/>
       <feMergeNode in="SourceGraphic"/>
     </feMerge>        
   </filter>
 </defs>
</svg>



<svg height="150" width="150" id="mySVG">
    <g>
<path d="M0,0 C-72,132 -72,-26 100,100"></path>
    </g>
    <g class="shadow">
    <circle class="shadow" cx="100" cy="100" r="20"></circle>
    </g>
  </svg>

相关讨论

在此CodePen中，我向动态生成的path和text添加了不同的阴影。在这里，我找到了一个跨浏览器解决方案，您可以将其应用于class，而不是#robbie img(在第二个链接中)：

1
#robbie img { filter:"progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";   filter: url(#drop-shadow);   -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));   filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); }

在第一个CodePen中，我评论了另一种不使用类的替代方法，但它使用了中定义的#numbers_dropshadows_filter和#strokes_dropshadows_filter。

干杯

相关讨论