如何使用CSS 3的SVG拖放阴影?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (363)

是否可以使用CSS 3为SVG元素设置拖放阴影,例如

box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;

我看到了一些关于使用过滤器效果创建阴影的注释。是否有单独使用CSS的例子。下面是正确应用缓冲样式的工作代码,但没有阴影效果。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> 
<style type="text/css" media="screen">  
    svg .shadow { cursor:crosshair; 
            -moz-box-shadow: -5px -5px 5px #888;
            -webkit-box-shadow: -5px -5px 5px #888;
            box-shadow: -5px -5px 5px #888; }   
</style>
</head>
<body>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" />
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"  viewBox="0 0 120 70">  
        <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>
</body>
</html>
提问于
用户回答回答于

使用新的CSSfilter

可以试试:

.shadow {
    /* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */
    -webkit-filter: drop-shadow( -5px -5px 5px #000 ); 
            filter: drop-shadow( -5px -5px 5px #000 );
}

你的html 是:

<img src="my-svg-graphic.svg" class="shadow">

<!-- Or -->

<svg class="shadow" ... >
    <rect x="10" y="10" width="100" height="50" fill="#c66" />
</svg>

这个方法不同于 box-shadow这是因为它说明了不透明度,并且没有将下拉阴影效应应用到框中,而是应用于SVG元素本身的角点。

用户回答回答于

扫码关注云+社区

领取腾讯云代金券