d3.js를 사용한 SVG 스타일링에 대해 혼동 스럽습니다

Question

대부분의 d3.js 예제는 SVG를 사용하여 다이어그램을 그립니다 (예 : div 대신 rect). 다시 말해서 drop-shadow과 같은 CSS 속성을 적용 할 수 없다는 의미입니다.

대체 방법은 <defs>에 필터를 정의하는 것입니다. rect을 그라디언트 색상으로 채우려면 동일한 내용이 적용됩니다. 그게 지금까지인가?

그래서 일부 필터와 그라디언트를 정의하지만 모든 페이지에 대해 이러한 정의를 다시 정의하는 것은 매우 중복 된 것처럼 보입니다. 이러한 모든 정의를 별도의 svg 파일에서 참조 할 수는 없습니까?

나는 다음과 같은 것을 시도했다 : filter: url(.../my_file.svg)하지만 작동하지 않는 것 같지만 어떻게 될 수 있겠는가?

Answer 1

filters.svg이라는 파일이 있고 몇 가지 필터 정의가 포함되어 있다고 가정 해 보겠습니다.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <filter id="my_filter" x="0%" y="0%" width="100%" height="100%"> 
    ... 
    </filter> 
</svg> 

당신이 동일한 문서에 my_filter을 사용한 경우, 당신은 그냥 #my_filter를 사용하여 참조 것 : 그것은 다음과 같이 보입니다. 그러나 당신은 그렇지 않습니다. 다른 문서에서 사용하고 싶습니다. 그런 다음 해당 문서에서 /filters.svg#my_filter으로 참조해야합니다. 이처럼 :

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <rect x="0" y="0" width="100" height="100" fill="url(/filters.svg#my_filter)" /> 
</svg> 

이 두 문서가 동일한 도메인에서 액세스 할 수 있습니다, 이것은 CSS 스타일 시트에서 작동하는지 모르겠어요 그들은 등, 적절한 장소에 위치하고 있다는 것을 가정 물론입니다 SVG 문서 전체에서 작동합니다. 자세한 내용은 section on Linking in the SVG Specification을 확인하십시오.