grapha svg import size

Question

일러스트 레이터 이미지에서 SVG 파일을 생성했습니다. 저는 이것을 사용하고 있습니다 : https://github.com/wout/raphael-svg-import을 가져와 벡터 이미지를 표시하십시오.

나는 텍스트로의 SVG 파일을 읽고, 가져 오기 기능에 제출 : 모든 아주 멋지게 작업

var mygetrequest = new XMLHttpRequest(); 
var svgdata = mygetrequest.responseText; 
paper.importSVG(svgdata); //where paper is my Raphael canvas 

.

하지만 이미지의 설정 및보기를 변경하는 방법에 대한 정보 나 힌트를 찾을 수없는 것 같습니다. 예를 들어,이 컨테이너의 크기를 무시하고 컨테이너를 작성하는 것이 좋습니다.

아이디어가 있으십니까? 도중에 도움이되는 문서? 뭐든지, 정말로 ...

Answer 1

내가 당신을 제공 할 수있는 두 개의 아이디어가있다 다음 SVG 가져 오기 계정에 원래 크기를 받아

1) 어쩌면 않는 당신을 위해 확장. 그러나 일러스트 레이터에서 편집 할 때 은 훨씬 더 큰 문서를 가지고 있는데, 이것은 svgImport를 혼란스럽게합니까?

2) 그렇지 않으면 용지를 세트로 가져올 수 있습니다. 세트를 스케일합니다.

var set = paper.set(); 
paper.importSVG(svgdata, set); 
set.scale(2, 2, centerx, centery); 

(예 : 중심점과 중심점이 있어야합니다.

[(승인 후) 편집] 라파엘 세트의 경계 상자를 얻을 수 있습니다 보인다

var bbox = set.getBBox(); 
// You'll now have bbox.x, bbox.y, bbox.width and bbox.height at your disposal. 
// For example: 
paper.rect(bbox.x, bbox.y, bbox.width, bbox.height).attr('border', 'red'); 

그래서 내가 말하고 싶지만 그럴 수 :

1. 수입의 경계 상자를 가져옵니다 SVG 세트
2. set.translate을 사용하여 테두리 상자의 가운데를 용지의 가운데에 맞 춥니 다 (예 : x 번역의 경우 (paperwidth/2) - (bbox.x + bbox.width/2)과 같은 것을 사용하십시오).
3. 배율 상자 크기를 용지 크기와 비교 한 배율입니다. 화면 비율을 유지하면서 비율을 조정하려는 경우 1 ( paper.width/bbox.width 및 paper.height/bbox.height)에 가장 가까운 것을 사용해야합니다.
4. (참고 : 스케일링의 중심 지금은 종이의 사용 센터 - 당신은 당신의 설정 번역이 실제로뿐만 아니라 설정 SVG의 중심이기 때문에) 내가 너무 내 머리의 상단에서 이런 짓을

100 % 정확하지는 않겠지 만 아이디어를 얻으면 결함을 제거 할 수있을 것입니다.

Answer 2

나는 비슷한 문제가 있었다. 내가 한 일은 Inkscape (SVG 편집기 프로그램)에서 SVG를 열었을 때까지 크기를 바꿀 때까지 바뀌 었습니다 ... 그러나 더 나은 방법이있을 것입니다!

Answer 3

원래 포스터와 똑같은 문제가있었습니다. 나는 그가 한 것과 똑같은 일을했다. 나는 Jochem으로부터 해결책이나 아이디어를 읽은 후에도 며칠 동안 해결할 수 없었던 문제들을 보았습니다.

내 특정 문제는 Internet Explorer (모든 버전)에서 이미지가 렌더링 영역을 벗어난 상태로 유지하며 특히 포함 된 div의 하단 오른쪽 모서리에 맞춰 렌더링됩니다. 센터에 노력하고 그것이 작동 않으며 쉽게 변환의 라파엘의 구현을 이해하는 것이었다하지 않았다 변환을 사용하여 컨테이너의에 이미지 '적합'

• .
• 나는 raphael-svg-import 라이브러리가 불완전하고 svg 그룹에서 작동하지 않으며 문서가 존재하지 않는다는 것을 깨달았습니다.

이 문제에 많은 시간을 보낸 후 수석 개발자는이 플러그인에 결함이있어 사용하지 못한다고 결론을 내 렸습니다.

지금까지 회사 정책으로 인해 Flash를 사용할 수없는 특정 요구 사항을 충족하는 대체 솔루션을 찾을 수 없었습니다. 그 제한이없는 사람들을 위해 나는 Google의 추천을 권고한다. SVGWeb

이것은 OP의 질문에 대한 답이 아니지만, 나의 발견은 앞으로이 문제를 겪을 수있는 누군가를위한 시간을 절약 할 수있다.