logo标签列表

使用CSS3实现SVG阴影效果

htmlcsssvgsvg-filters
503

是否可以使用CSS3为SVG元素设置投影效果，类似于：

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

我看到一些关于使用滤镜效果创建阴影的评论。是否有仅使用css的示例？以下是一个工作代码，其中cusor样式被正确应用，但没有阴影效果。请帮助我用最少的代码获得阴影效果。

svg .shadow { 
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
} 
<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>

8个回答
797

使用 CSS 的filter属性。

支持 Webkit 浏览器, Firefox 34+ 和 Edge。

你可以使用这个polyfill，它支持 FF < 34 和 IE6+。

你可以像这样使用它：

/* Use -webkit- only if supporting: Chrome < 54, iOS < 9.3, Android < 4.4.4 */

.shadow {
  -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  /* Similar syntax to box-shadow */
}
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Star_wars2.svg" alt="" class="shadow" width="200">

<!-- Or -->

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

<!-- Or -->

<svg>
  <g fill="none" stroke="#decade" stroke-width="2" transform="scale(2)">
    <circle class="shadow" cx="20" cy="20" r="19"/>
    <path class="shadow" d="M 20,1 V 39"/>
    <path class="shadow" d="M 20,1 V 20" transform="rotate(135, 20, 20)"/>
    <path class="shadow" d="M 20,1 V 20" transform="rotate(225, 20, 20)"/>
  </g>
</svg>

这种方法与css的box-shadow效果不同，它考虑了透明度，并且不将阴影效果应用于框，而是应用于svg元素本身的轮廓。
注意：当类仅放置在元素上时，此方法曾经有效。现在您可以在内联svg元素（如）上使用此方法。
了解更多关于css滤镜的信息here。
54
看起来这适用于图像或整个 SVG，但对于 SVG 中的选择不起作用。 该fiddle。 - heneryville
16
这种方法无法对SVG元素应用阴影，切勿使用。失败示例：http://jsbin.com/bepurahuwa/1/edit?html,css,js,output - Andy Ray
22
@AndyRay 的代码非常好用，只需将这个 class 加到 <svg> 标签上即可。http://jsbin.com/peviso/edit?html,css,js,output - hitautodestruct
7
@hitautodestruct是的，它确实像这样工作。真正的问题出现在您需要将过滤器应用于一个元素，但不适用于其他元素时。 - Joum
4
我猜@AndyRay和hitautodestruct都是正确的，因为正如这里指出的，这看起来像是Chrome的渲染问题：Firefox能够正确地渲染SVG特定元素上的滤镜。 - Gruber
显示剩余18条评论
412

这是一个使用'filter'属性对一些svg应用阴影的示例。如果您想要控制阴影的不透明度，请参考此示例。 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滤镜做些什么。

2
有没有一种方法可以控制投影的不透明度？ - Hugh Guiney
7
@HughGuiney：是的，当然。这是一种实现方式的例子，http://xn--dahlstrm-t4a.net/svg/filters/arrow-with-dropshadow-lighter.svg。只需变化`slope`属性即可调整所需的不透明度程度。 - Erik Dahlström
1
该过滤器似乎会使垂直线条消失。 - Vector Gorgoth
4
如何在D3.js中实现此方法的示例：http://bl.ocks.org/cpbotha/5200394 - mb21
3
@Costa 可以查看例如https://dev59.com/AVzUa4cB1Zd3GeqP6cij的链接。 - Erik Dahlström
显示剩余13条评论
138
使用 drop-shadow() CSS 函数和 rgba 颜色值，您可以轻松地向svg元素添加阴影效果。通过使用 rgba 颜色值，您可以更改阴影的不透明度。 

img.light-shadow{
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
}

img.dark-shadow{
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 1));
}
<img class="light-shadow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" />
<img class="dark-shadow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" />

10
@Foxhoundn 这绝对是现代解决方案，应该被接受为答案。 - SeedyROM
Internet Explorer 11：失败（没有阴影，但显示原始SVG图像）。Firefox（Release＆ESR）：OK。Google Chrome：OK。Edge Legacy：OK。 - Culip
2
如果这只能在SVG中的组和形状上运行就好了！ - OG Sean
53

我发现最简单的方法是使用feDropShadow。

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

在该元素上：

<path d="..." filter="url(#shadow)"/>
6
我阅读了一些内容，现在我理解了你的回答，肯定会给你点赞。这个答案没有得到足够的欣赏。不过，再多解释一点会更好。比如这个例子：https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDropShadow#SVG - Niklas
2
为了使其正常工作，您需要将 filter:url(#shadow) 添加到要添加阴影的元素中（#shadow 是 filter 标签的 id）。例如 <path d="..." style="filter:url(#shadow)"/>。也许您应该在您的答案中加入这个。 - Donald Duck
在feDropShadow dx="40" dy="40" stdDeviation="35"中使用较小的值，例如3,3,1而不是40,40,35可能会节省一些混淆。 - Dimanjan
2

黑色文字白色阴影

另一种方法，我用于白色阴影（在文本上）：创建阴影的克隆：

注意：这需要在SVG声明中添加xmlns:xlink="http://www.w3.org/1999/xlink"。

真正的文本值位于<defs>部分，具有位置和样式，但没有fill定义。

该文本被克隆两次：第一次是为了阴影，第二次是为了文本本身。

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="70"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
  <filter id="Blur"><feGaussianBlur stdDeviation="0.8" /></filter>
  <text style="font-family:sans,helvetica;font-weight:bold;font-size:12pt"
      id="Text"><tspan x="12" y="19">
        Black text with white shadow
    </tspan></text>
  </defs>
  <rect style="fill:#8AB" width="640" height="70" />
  <use style="fill:white;" filter="url(#Blur)" xlink:href="#Text"
      transform="translate(1.8,.9)"/>
  <use style="fill:black;" xlink:href="#Text"/>
</svg>

更远的阴影，其最大值为模糊偏差：

<svg xmlns="http://www.w3.org/2000/svg" width="640" height="70"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
  <filter id="Blur"><feGaussianBlur stdDeviation="3" /></filter>
  <text style="font-family:sans,helvetica;font-weight:bold;font-size:12pt"
      id="Text"><tspan x="12" y="19">
        Black text with white shadow
    </tspan></text>
  </defs>
  <rect style="fill:#8AB" width="640" height="70" />
  <use style="fill:white;" filter="url(#Blur)" xlink:href="#Text"
      transform="translate(7,5)"/>
  <use style="fill:black;" xlink:href="#Text"/>
</svg>

您可以使用相同的方法处理常规SVG对象。

具有相同要求：在<defs>部分没有填充定义！

<svg xmlns="http://www.w3.org/2000/svg" width="364" height="172"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="Blur"><feGaussianBlur stdDeviation="0.8" /></filter>
    <g transform="matrix(.7,0,0,.7,-117.450795,-335.320895)" id="Img">
        <g transform="matrix(12.997776,0,0,-12.997776,389.30313,662.04015)">
            <path d="m 0,0 -1.107,0 c -0.039,0 -0.067,0.044 -0.067,0.086 0,0.015 0.589,1.914 0.589,1.914 0.021,0.071 0.023,0.073 0.031,0.073 l 0.001,0 c 0.009,0 0.01,-0.002 0.031,-0.073 0,0 0.589,-1.899 0.589,-1.914 C 0.067,0.044 0.037,0 0,0 M 1.493,4.345 C 1.482,4.383 1.448,4.411 1.408,4.414 l -4.065,0 C -2.698,4.41 -2.731,4.383 -2.742,4.346 c 0,0 -2.247,-7.418 -2.247,-7.432 0,-0.037 0.029,-0.067 0.067,-0.067 l 2.687,0 c 0.021,0.008 0.037,0.028 0.042,0.051 l 0.313,1 c 0.01,0.025 0.033,0.042 0.061,0.043 l 2.479,0.002 c 0.027,-0.002 0.051,-0.021 0.061,-0.045 l 0.32,-1 c 0.005,-0.023 0.021,-0.044 0.042,-0.052 0,0 2.642,10e-4 2.644,10e-4 0.037,0 0.068,0.028 0.068,0.065 0,0.013 -2.302,7.433 -2.302,7.433" />
        </g>
        <g transform="matrix(12.997776,0,0,-12.997776,508.27177,644.93113)">
            <path d="m 0,0 -1.651,-0.001 c 0,0 -0.044,0.013 -0.044,0.063 l -10e-4,0.833 c 0,0.05 0.044,0.063 0.044,0.063 l 1.514,0 C 0.038,0.958 0.394,0.87 0.394,0.463 0.394,0.056 0,0 0,0 m 7.916,0.645 3.741,0 0,2.453 -4.81,0 C 6.397,3.098 5.764,2.866 5.401,2.597 5.038,2.328 4.513,1.715 4.513,0.87 c 0,-0.845 0.513,-1.502 0.513,-1.502 0.263,-0.326 0.925,-1.005 0.925,-1.005 0.015,-0.016 0.024,-0.037 0.024,-0.061 0,-0.051 -0.041,-0.092 -0.092,-0.092 l -3.705,0 c -0.451,0.002 -0.482,0.181 -0.482,0.207 0,0.046 0.056,0.075 0.056,0.075 0.169,0.081 0.514,0.35 0.514,0.35 0.732,0.57 0.82,1.352 0.82,1.771 0,0.42 -0.063,1.163 -0.814,1.814 C 1.521,3.078 0.57,3.096 0.57,3.096 l -5.287,0 c 0,0 0,-7.52 0,-7.522 0,-0.024 0.022,-0.043 0.046,-0.043 l 2.943,0 0,2.11 c 0,0.037 0.057,0 0.057,0 l 1.533,-1.54 c 0.545,-0.551 1.446,-0.57 1.446,-0.57 l 5.796,0.001 c 0.989,0 1.539,0.538 1.69,0.688 0.15,0.151 0.651,0.714 0.651,1.647 0,0.932 -0.426,1.409 -0.608,1.628 C 8.675,-0.309 8.029,0.375 7.894,0.517 7.878,0.53 7.868,0.55 7.868,0.572 c 0,0.033 0.019,0.064 0.048,0.073" />
        </g>
        <g transform="matrix(12.997776,0,0,-12.997776,306.99861,703.01559)">
            <path d="m 0,0 c 0.02,0 0.034,0.014 0.04,0.036 0,0 2.277,7.479 2.277,7.486 0,0.02 -0.012,0.042 -0.031,0.044 0,0 -2.805,0 -2.807,0 -0.014,0 -0.023,-0.011 -0.026,-0.026 0,-0.001 -0.581,-1.945 -0.581,-1.946 -0.004,-0.016 -0.012,-0.026 -0.026,-0.026 -0.014,0 -0.026,0.014 -0.028,0.026 L -1.79,7.541 c -0.002,0.013 -0.012,0.025 -0.026,0.025 -10e-4,0 -3.1,0.001 -3.1,0.001 -0.009,-0.002 -0.017,-0.01 -0.02,-0.018 0,0 -0.545,-1.954 -0.545,-1.954 -0.003,-0.017 -0.012,-0.027 -0.027,-0.027 -0.013,0 -0.024,0.01 -0.026,0.023 l -0.578,1.952 c -0.001,0.012 -0.011,0.022 -0.023,0.024 l -2.992,0 c -0.024,0 -0.044,-0.02 -0.044,-0.045 0,-0.004 10e-4,-0.012 10e-4,-0.012 0,0 2.31,-7.471 2.311,-7.474 C -6.853,0.014 -6.839,0 -6.819,0 c 0.003,0 2.485,-0.001 2.485,-0.001 0.015,0.002 0.03,0.019 0.034,0.037 10e-4,0 0.865,2.781 0.865,2.781 0.005,0.017 0.012,0.027 0.026,0.027 0.015,0 0.023,-0.012 0.027,-0.026 L -2.539,0.024 C -2.534,0.01 -2.521,0 -2.505,0 -2.503,0 0,0 0,0" />
        </g>
        <g transform="matrix(12.997776,0,0,-12.997776,278.90126,499.03369)">
            <path d="m 0,0 c -0.451,0 -1.083,-0.232 -1.446,-0.501 -0.363,-0.269 -0.888,-0.882 -0.888,-1.727 0,-0.845 0.513,-1.502 0.513,-1.502 0.263,-0.326 0.925,-1.01 0.925,-1.01 0.015,-0.016 0.024,-0.037 0.024,-0.06 0,-0.051 -0.041,-0.093 -0.092,-0.093 -0.008,0 -6.046,0 -6.046,0 l 0,-2.674 7.267,0 c 0.988,0 1.539,0.538 1.69,0.689 0.15,0.15 0.65,0.713 0.65,1.646 0,0.932 -0.425,1.414 -0.607,1.633 -0.162,0.196 -0.808,0.876 -0.943,1.017 -0.016,0.014 -0.026,0.034 -0.026,0.056 0,0.033 0.019,0.063 0.048,0.073 l 3.5,0 0,-5.114 2.691,0 0,5.101 3.267,0 0,2.466 L 0,0 Z" />
        </g>
        <g transform="matrix(12.997776,0,0,-12.997776,583.96822,539.30215)">
            <path d="m 0,0 -1.651,-0.001 c 0,0 -0.044,0.013 -0.044,0.063 l -10e-4,0.833 c 0,0.05 0.044,0.063 0.044,0.063 l 1.514,0 C 0.038,0.958 0.394,0.87 0.394,0.463 0.394,0.056 0,0 0,0 m 2.178,-1.79 c -0.45,0.002 -0.482,0.181 -0.482,0.207 0,0.046 0.056,0.075 0.056,0.075 0.169,0.081 0.514,0.35 0.514,0.35 0.732,0.57 0.82,1.352 0.82,1.771 0,0.42 -0.063,1.163 -0.814,1.814 C 1.521,3.078 0.57,3.098 0.57,3.098 l -5.287,0 c 0,0 0,-7.522 0,-7.524 0,-0.024 0.022,-0.043 0.046,-0.043 0.005,0 2.943,0 2.943,0 l 0,2.109 c 0,0.038 0.057,0 0.057,0 l 1.533,-1.539 c 0.545,-0.551 1.446,-0.57 1.446,-0.57 l 4.525,0 0,2.679 -3.655,0 z" />
        </g>
        <g transform="matrix(12.997776,0,0,-12.997776,466.86346,556.40203)">
            <path d="m 0,0 -1.107,0 c -0.041,0 -0.067,0.044 -0.067,0.086 0,0.016 0.589,1.914 0.589,1.914 0.021,0.071 0.027,0.073 0.031,0.073 l 0.001,0 c 0.004,0 0.01,-0.002 0.031,-0.073 0,0 0.589,-1.898 0.589,-1.914 C 0.067,0.044 0.04,0 0,0 M 1.49,4.347 C 1.479,4.385 1.446,4.412 1.405,4.414 l -4.065,0 C -2.7,4.412 -2.734,4.385 -2.745,4.348 c 0,0 -2.245,-7.42 -2.245,-7.434 0,-0.037 0.03,-0.067 0.067,-0.067 l 2.687,0 c 0.022,0.007 0.038,0.028 0.043,0.051 l 0.313,1.001 c 0.01,0.024 0.033,0.041 0.061,0.042 l 2.478,0 C 0.687,-2.061 0.71,-2.078 0.721,-2.102 l 0.32,-1 c 0.005,-0.023 0.021,-0.044 0.042,-0.052 0,0 2.642,10e-4 2.644,10e-4 0.037,0 0.067,0.028 0.067,0.066 0,0.012 -2.304,7.434 -2.304,7.434" />
        </g>
    </g>
  </defs>
  <rect style="fill:#8AB" width="364" height="172" />
  <use style="fill:white;" filter="url(#Blur)" xlink:href="#Img"
    transform="translate(1.8,.9)"/>
  <use style="fill:black;" xlink:href="#Img"/>
</svg>

只使用 flood-color 不就可以了吗？ - Robert Monfera
“模糊”用于使阴影看起来有点模糊。请查看我的第二个文本版本“更远的阴影…”（刚刚添加）。 - F. Hauri - Give Up GitHub
2

如果你的SVG元素是<text>，那么你可以毫无问题地使用CSS属性text-shadow。语法为text-shadow: 颜色 x-偏移量-px y-偏移量-px 模糊度-px。

1

可能是一种进化，似乎内联css滤镜在某种程度上对元素起作用。

在svg元素中声明drop-shadow css滤镜，无论是类还是内联，都不起作用，如之前所指定的。

但是，至少在Firefox中，通过以下巧妙方法：

使用javascript在DOM加载后内联附加滤镜声明。

// Does not works, with regular dynamic css styling:

shadow0.oninput = () => {
  rect1.style.filter = "filter:drop-shadow(0 0 " + shadow0.value + "rem black);"
}

// Okay! Inline styling, appending.

shadow1.oninput = () => {
  rect1.style += " ;filter:drop-shadow(0 0 " + shadow1.value + "rem black);"
  rect2.style += " ;filter:drop-shadow(0 0 " + shadow1.value + "rem black);"
}
<h2>Firefox only</h2>
<h4>
Does not works! 
<input id="shadow0" type="number" min="0" max="100" step="0.1">

 | Okay!
<input id="shadow1" type="number" min="0" max="100" step="0.1">

<svg viewBox="0 0 120 70">  
    <rect id="rect1" x="10" y="10" width="100" height="50" fill="#c66" />
    
    <!-- Inline style declaration does NOT works at svg level, no shadow at loading: -->
    <rect id="rect2" x="40" y="30" width="10" height="10" fill="#aaa" style="filter:drop-shadow(0 0 20rem black)" />
    
</svg>

enter image description here

-1

我不知道有仅使用CSS的解决方案。

正如您所提到的，滤镜是在SVG中创建投影效果的规范方法。SVG规范包括一个此类示例。

4
一定要使用-webkit-filter: drop-shadow()。查看@hitautodestruct的答案。 - clayzermk1
4
如果你希望它只在 Webkit 中工作......那么是的。我想我们正在寻找一种更可靠的解决方案，而且我认为这也不再得到支持。 - dudewad
@jbeard4 的链接已经失效了，最好把内容粘贴在这里。 - ey dee ey em
1
提交的链接指向*已删除：滤镜效果 此章节不再是SVG规范的一部分*！ - F. Hauri - Give Up GitHub
1
这是一个无关答案。 - Yay295
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接