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>

Почему в этом примере тень не красная? Где мой плохой?

Ответы

Ответ 1

  • Вы указали неверный SVG - вам нужно закрыть элемент <rect>.

  • Ваш пример (исправленный) показывает красную тень для меня в Chrome. Здесь этот URL-адрес выглядит для меня с Chrome v15:

    A light pink box with red border and shaodw

С какой ОС/браузером/версией вы видите разные результаты?

Изменить. В Firefox v7 я вижу все оттенки серого, а в Safari v5 я вообще не вижу теневой эффект. Ваш ответ, скорее всего, просто заключается в том, что вы тестируете в браузере/версии с неполной поддержкой спецификации фильтра SVG.

Ответ 2

Для тех, кто ищет общее решение, это работало для меня внутри элемента:

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