일러스트 레이터/SVG에서 자바 스크립트 워크 플로우? (A 템플릿 라이브러리?)

Question

는 "절약은 SVG로"Illustrator에서, 이것은 전형적인 결과입니다

<?xml version="1.0" encoding="iso-8859-1"?> 
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="841.89px" height="595.28px" viewBox="0 0 841.89 595.28" style="enable-background:new 0 0 841.89 595.28;" 
    xml:space="preserve"> 
<g id="symbol1" ... > 
    <path ... /> 
    <path ... /> 
    <path ... /> 
</g> 
</svg> 

내가 자바 스크립트 템플릿 라이브러리 (수염처럼, 핸들 등 어떤 종류가 있는지 알고 싶습니다 .) 그렇게하면 HTML과 비슷한 방식으로 SVG를 사용할 수 있습니까? 그 질문에 대답하면 당신이에 의해 의미합니까 무엇 분명하지 않다 때문에 나를 SVG 요소 템플릿의 무리를 저장하고 자신의 스타일 속성과 동적으로 컨텐츠를 설정할 수 있습니다 것
...

Answer 1

는 잘 모르겠어요 "HTML과 비슷한 방식으로 SVG 사용"을하지만 Raphaël이라는 JavaScript 라이브러리가있어 HTML 페이지 조작에 jQuery을 사용하는 것과 비슷한 방식으로 SVG 그래픽을 조작 할 수 있습니다. 즉, 이미지 애니메이션, 이벤트 핸들러 연결, 페이지의 색상이나 모양 변경 등을 할 수 있습니다. (Raphaël은 SVG 지원없이 Internet Explorer에 VML을 사용합니다.) 또 다른 방법은 jQuery SVG 플러그인 또는 some other libraries을 사용하는 것입니다.

물론 SVG는 텍스트 형식이므로 모든 템플릿 엔진이 함께 작동해야하지만, Raphaël, jQuery SVG 등의 차이는 기본 XML 형식의 소스 텍스트를 조작하지 않는다는 것입니다 , 결과적으로 DOM tree은 트리를 수정하는 동안 결과가 살아 있음을 볼 수있을뿐만 아니라 일반적으로 유효하지 않은 템플릿 엔진을 사용하여 XML 소스 코드를 조작하는 경우 매우 일반적인 잘못된 문서를 만드는 것이 훨씬 어렵다는 것을 의미합니다 XML을 이해하지만 대신 모든 텍스트처럼 취급하십시오.

GitHub에서 Illustrator to Raphael JS: A Guide을 읽고 Raphaël SVG Import plugin 및 Raphaël SVG Import Classic을 모두 읽는 것이 좋습니다.

Answer 2

https://groups.google.com/forum/#!topic/d3-js/qVZ7hacBGrE에 따르면 밑줄 템플릿을 사용할 수 있습니다.

이 포럼은 대안에 대해 설명합니다

1. 하는
2. 사용하여 수정 "사용"과 SVG "인증 된 정의"
3. 삽입 SVG 개체를 만들 수를 d3.js
4. 하게 그것을 볼 수