D3.js 빠른 트랜지션을위한 SVG 드롭 섀도우

Question

빠른 트랜지션을위한 드롭 그림자를 만드는 가장 좋은 방법은 무엇입니까?

var shadow = vis.append("defs").append("filter") 
    .attr("id","dropshadow") 
    .attr("height","130%"); 

shadow.append("feGaussianBlur") 
    .attr("in","SourceAlpha") 
    .attr("stdDeviation","3"); 

shadow.append("feOffset") 
    .attr("dx","2") 
    .attr("dy","2") 
    .attr("result","offsetblur"); 

어떤 크로스 브라우저의 CSS의 DropShadow이 있습니까 : (내가 움직일 아마 20 정도 사각형이) 나는 아래의 코드와 필터를 사용하여 시도했지만 내 전환이 훨씬 더 고르지하게처럼 보인다 현대적인 브라우저를 위해서? (ie9 +, 크롬, 파이어 폭스 ... 다른 사람들을 지원하지 않겠습니까?)

이러한 그림자 유형으로 화면 전환을 빠르게 할 수있는 방법이 있습니까?

다른 방법이 있습니까? 그 뒤에 다른 직사각형을 그려야하나요?

Answer 1

CSS 드롭 섀도우를 찾고 있다면 찾고있는 속성이 box-shadow입니다. 그것은 업 IE9로부터 지원 네 등록 소요된다

수직 그림자 오프셋

• 수평 오프셋
• 그림자
• 그리고 그 확산 흐림해야하는 값

그림자 자체를 어떤 방식 으로든 애니메이트하기를 원한다면 과도기 변화에도 응답합니다.

자세한 내용은 W3 링크 here에서 더 자세히 볼 수 있습니다.