css使用svg_使用CSS和SVG创建真正的跨浏览器投影效果

css使用svg

Recently I discussed the drop-shadow filter. Right now we're in an interesting place with respect to the filter: Chrome, Safari and the latest versions of Firefox support the filter, while older versions of Mozilla's browser use an SVG equivalent, and IE9 and earlier use a proprietary Microsoft version.

最近， 我讨论了阴影过滤器 。 目前，我们在过滤器方面处于一个有趣的位置：Chrome，Safari和最新版本的Firefox支持该过滤器，而旧版的Mozilla浏览器使用的是SVG等效项，而IE9和更早的版本使用专有的Microsoft版本。

In this article I’m going to show you how to write the effect for all browsers, so you can achieve the benefits of a true, dynamic drop shadow for all elements.

在本文中，我将向您展示如何为所有浏览器编写效果，从而为所有元素带来真实，动态的投影效果。

The CSS version first, as a refresher:

首先是CSS版本，作为复习：

-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));

The syntax is very straightforward: the values for the filter represent, in order, horizontal offset, vertical offset, blur and the color of the shadow (given as an rgba value to create a realistic shadow against any background).

语法非常简单：滤镜的值依次表示水平偏移，垂直偏移，模糊和阴影的颜色(作为rgba值提供，可在任何背景下创建逼真的阴影)。

Firefox(v35之前的版本) (Firefox (pre v35))

Now the SVG version. You can either save this as a separate file (shadow.svg) or embed it on a web page. The code is as follows:

现在是SVG版本。 您可以将其保存为单独的文件( shadow.svg )，也可以将其嵌入网页中。 代码如下：

<svg height="0" width="0" xmlns="http://www.w3.org/2000/svg">
	<filter id="drop-shadow">
		<feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
		<feOffset dx="12" dy="12" result="offsetblur"/>
		<feFlood flood-color="rgba(0,0,0,0.5)"/>
		<feComposite in2="offsetblur" operator="in"/>
		<feMerge>
			<feMergeNode/>
			<feMergeNode in="SourceGraphic"/>
		</feMerge>
	</filter>
</svg>

The SVG syntax is considerably more complex, and I’m not going to explain all of it here. The good news is that you only need to alter four values: stdDeviation is the amount of blur; dx is the horizontal offset and dy the vertical, with flood-color being the color of the shadow.

SVG语法要复杂得多，在此不再赘述。 好消息是，您只需要更改四个值即可： stdDeviation是模糊量； dx是水平偏移， dy是垂直偏移， flood-color是阴影的颜色。

IE浏览器 (IE)

Finally, the equivalent for Internet Explorer 9 and earlier:

最后，等效于Internet Explorer 9和更早版本：

/* for IE 8 & 9 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
	/* For IE 5.5 - 7 */
	filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";

You’ll find that the visual quality is not nearly as good in IE – and you do have to do some re-jiggering and testing to translate the CSS/SVG values into legacy DX filters – but the dropshadow will appear at least appear in Internet Explorer.

您会发现IE的视觉质量不尽如人意-而且您必须进行一些重新定位和测试才能将CSS / SVG值转换为旧版DX过滤器-但是下拉阴影至少会出现在Internet中资源管理器。

汇集全部 (Bringing It All Together)

I’d suggest combining all these approaches as a class, as you’d usually want to apply the effect to more than one element on the same page… and naturally, you’d want all of the shadows on the page to fall in the same direction, to ensure a consistent visual appearance:

我建议将所有这些方法组合为一个类 ，因为您通常希望将效果应用到同一页面上的多个元素上……自然，您希望页面上的所有阴影都落在相同方向，以确保一致的视觉外观：

.shadowed {
	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));
}

(If you embedded the SVG code directly on the page, you’d use just the id value: note that it matches the id on the SVG code sample).

(如果直接在页面上嵌入SVG代码，则只使用id值：请注意，它与SVG代码示例中的id匹配)。

That’s it! You can now apply the class to a transparent PNG or any other element to gain a true drop-shadow effect across modern browsers.

而已！ 现在，您可以将类应用于透明的PNG或任何其他元素，以在现代浏览器中获得真正的阴影效果。

翻译自: https://thenewcode.com/600/Creating-a-True-Cross-Browser-Drop-Shadow-Effect-With-CSS-amp-SVG

css使用svg