Отбрасываем тени вокруг форм SVG / VML или Canvas - PullRequest
Новая
       22

Отбрасываем тени вокруг форм SVG / VML или Canvas

2 голосов
/ 17 марта 2011

Легко ли создавать тени на фигурах, созданных с помощью svg (vml для совместимости с IE7 / 8), или на фигурах, созданных с помощью холста html5?Я хочу создать стрелку с тенью.

1 Ответ

6 голосов
/ 17 марта 2011

Вот пример svg , показывающий, как получить тень: 

  <defs>
    <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> 
      <feOffset dx="2" dy="2" result="offsetblur"/> 
      <feMerge> 
        <feMergeNode/>
        <feMergeNode in="SourceGraphic"/> 
      </feMerge>
    </filter>
  </defs>
  <polygon points="58.263,0.056 100,41.85 58.263,83.641 30.662,83.641 62.438,51.866 0,51.866 0,31.611 62.213,31.611 30.605,0 58.263,0.056" fill="#EEEEEE" filter="url(#dropshadow)"/>

Важные биты:

  1. Определение <filter> ( фильтры svg может сделать намного больше, чем просто отбрасывать тени)
  2. Чтобы использовать фильтр, укажите его с помощью синтаксического фильтра url(#id) через свойство фильтра filter CSS или атрибут представления, как впример выше
...