首页 文章

使用css3的SVG投影

提问于
浏览 次
261

是否可以使用css3为svg元素设置投影，类似于

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

我看到了一些关于使用滤镜效果创建阴影的评论 . 有一个单独使用css的例子 . 下面是一个工作代码，其中正确应用了cusor样式，但没有阴影效果 . 请帮我用最少的代码获取阴影效果 .

<?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>
css html5 css3 svg svg-filters

5 回答

  • 275

    这是使用'filter'属性为某些svg应用dropshall的example . 如果你想控制阴影的不透明度，请看this example . slope 属性控制为阴影提供多少不透明度 .

    示例中的相关位：

    <filter id="dropshadow" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge>
</filter>
<circle r="10" style="filter:url(#dropshadow)"/>

    Box-shadow被定义为在CSS框上工作（读取：矩形），而svg比矩形更具表现力 . 阅读SVG Primer以了解有关使用SVG过滤器可以做些什么的更多信息 .

    回复于
  • 3

    使用新的CSS filter属性 .

    Supported by webkit browsers，Firefox 34和Edge .

    您可以使用支持FF <34，IE6的polyfill .

    你会像这样使用它：

    .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元素本身的角落 .

    你可以看到live example here .

    Please Note ：此方法仅在将类放在 <svg> 元素上时才有效 . 你可以在内联svg元素上使用它，例如 <rect> .

    <!-- This will NOT work! -->
<svg><rect class="shadow" ... /></svg>

    在html5rocks上阅读有关css过滤器的更多信息 .

    回复于
  • -2

    因此，正如Lorenzo Polidori所接受的答案的埋藏评论中所提到的，Chrome中最适合我的选项（我确定其他Webkit浏览器）是：

    -webkit-svg-shadow: 0 0 7px #53BE12;
    回复于
  • 375

    我不知道只有CSS的解决方案 .

    正如您所提到的，过滤器是在SVG中创建投影效果的规范方法 . SVG规范包括以下示例：http://www.w3.org/TR/SVG/filters.html#AnExample

    回复于
  • 11

    我找到的最简单方法是使用 feDropShadow . 我永远不会回到使用那些我不理解的令人难以置信的深奥的过滤器标签名称 .

    <filter id="shadow" x="0" y="0" width="200%" height="200%">
  <feDropShadow dx="40" dy="40" stdDeviation="35" flood-color="#ff0000" flood-opacity="1" />
</filter>
    回复于

相关问题