是否有可能为svg元素设置投影使用css3之类的东西
box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
我看到一些关于使用滤镜效果创建阴影的说明。有单独使用css的例子吗?下面是正确应用cusor样式的工作代码，但没有阴影效果。请帮助我用最少的代码得到阴影效果。
SVG .shadow { 光标:十字丝; -moz-box-shadow: -5px -webkit-box-shadow: 5px #888; 盒子阴影: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"> <矩形类=“影子”x = " 10 " y = " 10 "宽度= " 100 "高度=“50”填补= " # c66 " / > < / svg >
当前回答
您可以使用drop-shadow() CSS函数和rgba颜色值轻松地为svg元素添加投影效果。通过使用rgba颜色值，你可以改变你的阴影的不透明度。
img.light-shadow { 滤镜:投影(0px 3px 3px rgba(0,0,0,0.4)); ｝ img.dark-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" />
其他回答
使用新的CSS过滤器属性。
webkit浏览器、Firefox 34+、Edge支持。
您可以使用这种聚合物，将支持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>元素上时有效。您现在可以在内联svg元素上使用它，例如<rect>。
在html5rocks上阅读更多关于css过滤器的内容。
我发现最简单的方法是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)"/>
如果您的SVG元素是<text>，您可以毫无问题地使用CSS属性text-shadow。语法是text-shadow: color x-offset-px y-offset-px blur-px。
您可以使用drop-shadow() CSS函数和rgba颜色值轻松地为svg元素添加投影效果。通过使用rgba颜色值，你可以改变你的阴影的不透明度。
img.light-shadow { 滤镜:投影(0px 3px 3px rgba(0,0,0,0.4)); ｝ img.dark-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" />
下面是一个使用'filter'属性为svg应用dropshadow的例子。如果你想控制投影的不透明度，看看这个例子。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入门教程，了解更多关于SVG过滤器的功能。
