2013-08-12 3 views
1

Flash를 사용하여 .fxg 이미지로 내보내고 .svg로 저장하기 위해 Illustrator로 가져 오는 손으로 그린 ​​벡터 경로를 만들려하고 있습니다. 플래시에서 직접 svg로 내보낼 수 있었으면 좋겠지 만 또 다른 질문입니다.D3을 사용하여 SVG 심볼의 속성을 어떻게 편집합니까?

레이어에 경로를 만들고 심볼로 변환하지 않으면 단순한 SVG 그룹을 만들기 때문에 채우기 및 획 속성을 쉽게 업데이트 할 수 있지만 그 경로를 그래픽 심볼로 변환하면 쉽게 편집 할 수 있습니다 , 나는이 복잡한 심볼 링키지를 얻고 fill 및 stroke 속성에 액세스 할 수있는 것 같지 않습니다. 기호는 읽기 전용입니까? 그리고 어떻게 링크 된 sybmol을 선택하고 업데이트합니까?

나는 설명 나에게 도움이되는 몇 가지 의사 SVG 있습니다

<svg> 
<symbol id="btn_continue/> 
<g> 
    <path></path> 
</g> 
</symbol> 
<g id="continue"> 
    <use xlink:href="#btn_continue" width="133.95" height="133.95" x="-6.975" y="-126.975" transform="matrix(1 0 0 -1 694.2998 409)" overflow="visible"> 
    </use> 
</g> 
</svg> 

는 기호를 업데이트 할 수 있다면, 나는 대상이 같은 채우기 업데이트 할 수 있다고 생각합니다 :

d3.select("#continue").select("#btn_continue").selectAll("path").attr("fill","#990000"); 

이를 아무 효과가 없다. 크롬의 콘솔 내에서 심볼의 속성을 업데이트하려고 시도했지만 아무런 영향을 미치지 않아 읽기 전용이라고 믿게되었습니다. 이거 확인할 수 있니? 심볼을 어떻게 든 복제하고 경로 속성을 편집 할 수 있습니까? 당신이 심볼에 대한 변환을 수행 할 수 있다는 것을 알았습니다. 크기를 조절하고, 회전하고, 변환합니다. 모든 작업을 할 수 있습니다. 아마도 색상을 변경할 수 있습니다. 색상을 변환하려면 매트릭스 변환을 사용합니까?!

답변

1

당신이 뭔가를해야 할 것 때문에 경로, 그것은 기호의 자식 <use> 요소의 자식입니다되지

d3.select("#btn_continue").selectAll("g").selectAll("path").attr("fill","#990000"); 
+0

쿨 확인 - 내가 실험이 작동하고 있음을 증명하기 위해 약간의 바이올린을했다 - http://jsfiddle.net/headwinds/f3qNh/ – headwinds

관련 문제