相关疑难解决方法(0)

是否可以使用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; 
}	

我想一个下拉阴影过滤器适用于特定的元素/路径内的内联通过CSS放置SVG,我并不需要整个图形被遮蔽,里面它只是一个元素.

.shadow {
  fill: red;
  
  -webkit-filter: 
    drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
          filter: 
    drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
}

  <svg height="150" width="150">
    <g>
<path d="M0,0 C-72,132 -72,-26 100,100"></path>
    </g>
    <g class="shadow" >
    <circle class="shadow" cx="100" cy="100" r="20"></circle>
    </g>
  </svg>

正如您在上面所看到的,我正在尝试将渐变阴影应用于SVG的红色圆圈元素,但它不起作用.

搜索我没有找到任何具体的信息,在其他SVG相关问题中只有少数评论只是声明它不适用于单个SVG元素,但没有太多解释.

UPDATE

正如@azeós在评论中指出的那样,它正在使用Firefox(v.43.0.2)正确呈现,因此这是Chrome特定的问题.无论如何,如果不按照评论中的建议使用SVG代码来制作这个交叉浏览器？

我想在SVG中写一个带红色阴影的简单矩形.我有一个简单的过滤器:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1012" height="400">
  <title>svg arrow with dropshadow</title>
  <desc>An svg example of an arrow shape with a dropshadow filter applied. The dropshadow filter effect uses feGaussianBlur, feOffset and feMerge.</desc>
  <defs>
    <filter id="dropshadow" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
     <feComponentTransfer in="SourceAlpha">
         <feFuncR type="discrete" tableValues="1"/>
         <feFuncG type="discrete" tableValues="0"/>
         <feFuncB type="discrete" tableValues="0"/>
     </feComponentTransfer>
     <feGaussianBlur stdDeviation="2"/>
     <feOffset dx="0" dy="0" result="shadow"/>
     <feComposite in="SourceGraphic" in2="shadow" operator="over"/>
   </filter>
  </defs>
  <rect rx="2" ry="2" fill="rgb(255,255,255)" x="5.25" y="5.25" width="141" height="50" fill-opacity="0.85" filter="url(#dropshadow)">
</svg>

为什么在这个例子中阴影颜色不是红色？我哪里不好？