SVG 파일에서 경로의 좌표 추출

Adobe Illustrator의 경로에서 퍼시스 좌표를 찾아 HTML 이미지 맵에 사용하려고 시도하고 있는데 다른 사람이 경로를 SVG 파일로 저장하겠다고 제안했으나 노트 패드에서 SVG, 나는 다음과 같은 얻을 :SVG 파일에서 경로의 좌표 추출

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.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="300.96px" height="248.16px" viewBox="0 0 300.96 248.16" enable-background="new 0 0 300.96 248.16" xml:space="preserve"> 
<path fill-rule="evenodd" clip-rule="evenodd" fill="none" d="M81.6,152.64c7.519,0,15.041,0,22.56,0 
    c-0.64,2.88-1.28,5.76-1.92,8.64c-0.16,2.4-0.32,4.8-0.48,7.2c-0.16,0-0.32,0-0.48,0c0,2.56,0,5.121,0,7.68 
    c-0.659,2.333,0.264,6.49-0.48,9.12c-0.16,0-0.32,0-0.48,0c0,1.6,0,3.2,0,4.8c-0.16,0-0.32,0-0.48,0 
    c-0.584,2.076,0.248,5.349,0.48,6.72c0,1.6,0,3.2,0,4.8c-0.16,0-0.32,0-0.48,0c-0.364,1.869,0.809,1.523,0.96,1.92 
    c0.56,1.47-0.759,3.551-0.96,4.32c0.16,1.12,0.32,2.24,0.48,3.36c0.16,0,0.32,0,0.48,0c0.488,1.604-0.283,3.241-0.48,4.32 
    c-0.96-0.16-1.92-0.32-2.88-0.48c-0.48,1.44-0.96,2.88-1.44,4.32c0,0.8,0,1.6,0,2.4c-0.16,0-0.32,0-0.48,0c0,1.12,0,2.24,0,3.36 
    c-0.16,0-0.32,0-0.48,0c0,1.12,0,2.24,0,3.36c-0.16,0-0.32,0-0.48,0c0.16,2.24,0.32,4.48,0.48,6.72c-0.16,0-0.32,0-0.48,0 
    c0,0.64,0,1.28,0,1.92c-0.16,0-0.32,0-0.48,0c0,0.32,0,0.64,0,0.96c-0.32,0.16-0.64,0.32-0.96,0.48c0,0.32,0,0.64,0,0.96 
    c-0.32,0.16-0.64,0.32-0.96,0.48c-0.451,1.146,1.519,3.296,0,4.32c-0.32,0-0.64,0-0.96,0c-1.875,2.142-4.972,1.148-7.2,0.48 
    c-2.72,0-5.44,0-8.16,0c-0.933-1.886-1.007-2.403-3.84-2.4c0-0.48,0-0.96,0-1.44c1.326-0.347,1.074-0.134,1.44-1.44 
    c0.16,0,0.32,0,0.48,0c0-0.64,0-1.28,0-1.92c0.16,0,0.32,0,0.48,0c0.32-1.76,0.64-3.52,0.96-5.28c-0.48-0.16-0.96-0.32-1.44-0.48 
    c-0.16-0.8-0.32-1.6-0.48-2.4c-1.045-0.202-1.367-0.318-1.92-0.96c1.975-1.655,1.015-4.196,1.92-6.72c2.88-0.64,5.76-1.28,8.64-1.92 
    c0.633-2.939,2.051-6.325,2.88-9.12c0.455-1.531-0.247-3.995-0.48-4.8c-0.32-3.199-0.64-6.4-0.96-9.6c0-1.027,0.48-0.96,0.48-0.96 
    c-0.16-5.6-0.32-11.201-0.48-16.8c0-2.879,0-5.76,0-8.64c-0.16,0-0.32,0-0.48,0c0-1.6,0-3.2,0-4.8c-0.16,0-0.32,0-0.48,0 
    c0-1.76,0-3.52,0-5.28C81.954,157.702,81.619,155.542,81.6,152.64z"/> 
</svg>

는 사람이 어떻게 내가 HTML 이미지 맵으로 사용할 수 있도록이 XML 데이터에서 좌표를 추출하는 방법을 가르쳐 주 시겠어요? 필자는 분명히 XML 파일 구문 분석에 대한 경험이 없기 때문에 어디에서 스크립트를 준비해야할지 모르겠다.

미리 감사드립니다.

'D'속성 경로를 만들기 위해 사양이 포함되어 있습니다 :

출처

2012-08-25 dcd0181

글쎄, 당신은 SVG에 대해 알고있는 우선 경로가 구성되는 방식이다. 각 명령은 일치, 편지로 시작하는 다음

M = moveto 
L = lineto 
H = horizontal lineto 
V = vertical lineto 
C = curveto 
S = smooth curveto 
Q = quadratic Bézier curve 
T = smooth quadratic Bézier curveto 
A = elliptical Arc 
Z = closepath

경로는 조금 복잡합니다, 그것은 일러스트 레이터에 의해 생성 되었기 때문에, 어쨌든 M81.6,152.64는 첫 번째 단계는, 그것이이 커서의 위치를 렌더링 알 수있다 .

그리기 시작 : c7.519,0,15.041,0,22.56,0, "곡선까지"를 의미하며 4 개의 숫자는 입방 형 베 지어 곡선을 생성하는 값입니다 (here 자세히 알아보기) .

경로에 커브가 많이 있고 ('c'및 네 개의 숫자) 'z'로 끝나며 '경로 닫기'를 의미합니다.

무엇을 할 수 있습니까? 글쎄, 경로 태그의 속성 'd'(예 : xml javascript parser)를 구문 분석하거나 (파일의 내용을 문자열로 구문 분석하고 속성 d = ""의 내용을 검색하는 것)이 문자열을 사용하면 경로의 원점을 얻을 수 있습니다.

경로를 표시하려면 실시간으로 javascript로 렌더링하고 raphael.js을 사용할 수 있습니다. here을 볼 수 있듯이 경로를 만들기 위해 속성 'd'와 같은 문자열이 필요합니다. 아마도 lraphael을 사용하면 HTML 이미지 맵과 관련된 이벤트로 객체를 만드는 것이 더 쉬울 것입니다.

드로잉의 각 점을 추출하려면 SVG 경로가 그런 식으로 작동하지 않으면 xml에서 모든 점의 높이와 너비 만 얻을 수 있습니다. 나는 당신이 당신의 심상에 raphael svg 경로를 중복하기 위하여 당신을 추천한다.

출처

2012-10-22 14:38:14

답변

관련 문제