我想通过CSS对内联放置的SVG中的特定元素/路径应用阴影滤镜,我不需要整个图形被遮蔽,只需要它内部的元素。
.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) );
}
<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的红色圆圈元素,但它不起作用。
搜索我没有找到任何具体的信息,only few comments在其他SVG相关的问题只是声明它不适用于单个SVG元素,但没有太多的解释。
UPDATE
正如@azeós在评论中指出的那样,它正在使用Firefox(v.43.0.2)正确呈现,因此这是Chrome特定的问题。无论如何,如果不按照评论中的建议使用SVG代码来制作这个交叉浏览器?
您可以通过对要阴影的对象进行颜色选择,创建阴影然后将其合并到原始图形下来有选择地应用阴影。但是你必须通过CSS过滤器中的SVG过滤器陷门来实现 - 这在IE中不起作用。 (所以... hacky,但可能)
规范在这里:w3.org/TR/SVG11/filters.html#feColorMatrixElement
演示玩具在这里: https://beta.observablehq.com/@gitmullany/filter-effects-using-svg-color-matrices
该矩阵将所有红色值的不透明度加倍,将所有其他值的不透明度归零,然后减去1.效果是只留下100%不透明度的东西,即rgb(255,0,0)
#mySVG {
filter: url(#selective-shadow);
}
.shadow {
fill: red;
}
<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>
更新2018-03:我在这个问题上做了一些实验,因为我也找不到任何关于此的信息,结果非常不一致。 TL; DR版本,如果你是going to have use a polyfill或只是做SVG内的阴影。
Codepen实验:http://codepen.io/staypuftman/pen/GoNoMq
Chrome和edge Canary都没有在SVG对象下拉阴影的情况下正确地尊重filter
或-webkit-filter
,但是在简单的div
上工作。
看起来对SVG和HTML对象都很好。
Safari已经在10.1(可能是10.0)系列中解决了这个问题。
由于某种原因,SVG CSS dropshadow没有显示,并且div
的阴影具有较少的不透明度
没有。
在this CodePen中,我为动态生成的path
和text
添加了不同的阴影。 Here我找到了一个跨浏览器的解决方案,你可以应用于class
,例如,而不是#robbie img
(在第二个链接中):
#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)); }
在first CodePen中,我评论了另一种不使用类的替代方法,但它使用#numbers_dropshadows_filter
中定义的#strokes_dropshadows_filter
和<defs></defs>
。
干杯