2011-05-08 6 views
2

이것이 필요한 이유가 궁금하거나 더 큰 방법을 제안하고 싶다면 더 많은 문맥을 물어보십시오. 문제. 캠퍼스지도에 건물 평면도를 배치하고 건물지도에있는 특정 물체의 절대 위치를 찾는 것이 더 자세하게 나와 있습니다. 자세한 내용은 질문의 대상이 아닙니다.<image xlink : href = "something.svg"/>에 해당하는 <svg>을 작성하십시오.

짧은 버전은 내가 원하는 것입니다. < 이미지 xlink : href = "something.svg"/ > 참조를 가진 SVG 파일을 가져 와서 참조 된 각 SVG가 <svg> 및 인라인 SVG XML 내용으로 포함 된 하나의 큰 파일로 병합하십시오.

그래서, (잉크 스케이프에서 구성) 내 최상위 소스 파일은 다음과 같습니다

<image xlink:href="floorplans/bldg1.svg" 
width="165.52684" height="107.10559" y="-1937.7657" 
x="2507.1565" transform="matrix(0,1,-1,0,0,0)" /> 

그리고 모든 벡터 데이터 인라인 할 수있는 통합 된 버전에서 내 시도 : 그래서

<svg x="2507.1565" y="-1937.7657" width="165.52684" height="107.10559" 
transform="matrix(0,1,-1,0,0,0)" viewBox="0 0 1224 792"> 
<g id="surface0"> 
<path style="fill:none;stroke-width:0.72;stroke-linecap:round;stroke-linejoin:round;stroke:rgb(0%,0%,0%);... 

을 기본적으로 < 이미지 >을 <svg>으로 바꾸고 <svg> "floorplans/bldg1.svg"루트의 내용을 붙여 넣기 스크립트를 사용하고 있습니다. (복사는 <SVG>에 < 이미지 >에서 속성, 그리고 새로운 원래 <SVG>에서 뷰 박스 속성을 복사.)

이 기술은 회전되지 않는 것들에 근무하지만, 크롬에 보인다 이 특정 요소가 뷰포트 상단에서 벗어났다는 것을 말하십시오. SVG에 익숙하지 않지만, 변환 순서가 <svg>과 같지 않으므로 < 이미지 >에있는 것처럼 변환 순서가 동일하다고 생각합니다. 내가 눈치 채지 못하는 바보 같은 실수를했거나 xlink : href = "something.svg"transform = .../> <svg> inline XML을 사용하여 < 이미지를 xlink :

감사합니다.

답변

2

변형 속성은 SVG 사양에 따라 < svg> 요소에 적용되지 않습니다. < image> 요소에있는 변환을 < g> 요소의 바깥 쪽 또는 안쪽에 넣을 수 있습니다.

이런 식으로 동작하는 변환 이유는 svg> 요소가 좌표계를 설정하고 변환이 이에 따라 달라진다는 것입니다. 적용될 경우 발생하는 질문은 "변환이 좌표에서 해석되어야하는지 -space? svg 좌표계가 설정되기 전이나 후에? ")

+0

아하, 나는 그것에 대해 생각해 보지 않았거나 밀접하게 스펙을 읽지는 않았지만 당신이 옳았고 완벽하다고 생각했습니다. 을 변환과 함께 추가하고 을 감쌌다. 지금 당장 보인다. 감사! –

관련 문제