SVG：阴影的颜色 [英] SVG: color of the shadow

问题描述

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

I want to write a simple rectangle with a red shadow in SVG. I have a simple filter:

<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>

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

Why in this example shadow color is not red? Where is my bad?

推荐答案

1. 您提供的SVG无效 - 您需要关闭您的< rect> 元素。

铬。以下是Chrome v15的此网址对我的影响：

Your example (fixed) shows a red shadow for me in Chrome. Here's what this URL looks like for me with Chrome v15:

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

What OS/browser/version are you seeing different results with?

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

Edit: In Firefox v7 I see all greyscale, and in Safari v5 I don't see the shadow effect at all. Your answer, most likely then, is simply that you're testing in a browser/version with incomplete support of the SVG filter specification.

这篇关于SVG：阴影的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！