svg/vml 또는 캔버스 모양 주위에 그림자를 넣으십시오.

Question

svg (IE7/8 호환성을 위해 vml)로 만든 모양 또는 html5의 캔버스로 만든 모양 아래에서 그림자를 쉽게 만들 수 있습니까? 그림자가있는 화살표를 만들려고합니다.

Answer 1

는 여기 DropShadow를 얻는 방법을 보여주는 svg example입니다 :

<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> 정의는
2. 으로 (단지 dropshadows보다 svg filters이 더 많은 작업을 수행 할 수 있습니다) 필터를 사용하고, url(#id) 구문 필터로 CSS 'filter'속성을 통해 참조하거나 위의 예와 같이 프레젠테이션 속성을 참조하십시오.