CSS3를 사용한 SVG drop shadow

질문 : CSS3를 사용한 SVG 드롭 섀도우

---

css3을 사용하여 svg 요소에 대한 그림자를 설정할 수 있습니까?

box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;

필터 효과를 사용하여 그림자를 만드는 것에 대한 몇 가지 언급을 보았습니다. CSS 만 사용하는 예가 있습니까? 다음은 cusor 스타일이 올바르게 적용되었지만 그림자 효과가없는 작업 코드입니다. 최소한의 코드로 그림자 효과를 얻을 수 있도록 도와주세요.

 

 

svg .shadow { 
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"  viewBox="0 0 120 70">	
    <rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" />
</svg>

답변

---

다음은 'filter'속성을 사용하여 일부 svg에 dropshadow를 적용 하는 예입니다. 드롭 섀도우의 불투명도를 제어하려면 이 예제를 참조하십시오 . slope 속성은 그림자에주는 불투명도를 제어합니다.

예제의 관련 비트 :

<filter id="dropshadow" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge>
</filter>
<circle r="10" style="filter:url(#dropshadow)"/>

Box-shadow는 CSS 상자 (읽기 : 직사각형)에서 작동하도록 정의 된 반면, svg는 단순한 직사각형보다 좀 더 표현력이 뛰어납니다. SVG 필터로 수행 할 수있는 작업에 대해 자세히 알아 보려면 SVG 입문서 를 읽어보십시오.

출처 : https://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3