SVG：阴影的颜色

我想在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>

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

来源

2011-11-01 Oleg Ignatov

http://dev.opera.com/articles/view/svg-evolution-3-applying-polish/ ？page = 2 您可以将原始滤镜图像与真实图像叠加，以实现它。我以这种方式使用它。 – Kris

您提供了无效的SVG - 您需要关闭<rect>元素。
您的示例（固定）在Chrome中为我显示一个红色阴影。下面是this URL看起来像我的Chrome V15：

什么操作系统/浏览器/版本是你看到不同的结果有？

编辑：在Firefox v7中，我看到所有灰度，而在Safari v5中我根本看不到阴影效果。您的答案很可能只是您在浏览器/版本中进行测试，并且不完全支持SVG过滤器规范。

来源

2011-11-01 21:30:02 Phrogz

Safari在版本6之前不支持过滤器，请参阅http://caniuse.com/#feat=svg-filters。 –

我假设它不会因为http://www.w3.org/TR/SVG11/filters.html#SourceAlpha而产生红色。 SourceAlpha - >隐式黑色（＃000）+ alpha。如果用'in =“SourceGraphic”'替换'in =“SourceAlpha”'，它可以在Opera和Chrome中使用。 –

Firefox的问题在于它曾经有一个错误，它不会使用单个值处理离散的feFunc。它可以通过使用两个值来解决，例如。 tableValues =“1 1”。这在18个月前已经确定。 –

对于那些寻找一个通用的解决方案，这个工作对我来说是的元素：

<feGaussianBlur in="SourceAlpha" stdDeviation="1.7" result="blur"/> 
<feOffset in="blur" dx="3" dy="3" result="offsetBlur"/> 
<feFlood flood-color="#3D4574" flood-opacity="0.5" result="offsetColor"/> 
<feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>

来源

2014-09-12 23:25:21

我得到漂亮的结果与这feFlood和fecomposite – crapthings

SVG：阴影的颜色

回答

相关问题