마스크 / 자르기없이 SVG를 컨테이너로 확장

마스크 / 자르기없이 SVG를 컨테이너로 확장

---

svg매개 변수 의 많은 변형을 시도했지만 이 특정 SVG를 스케일링하는 데 기쁨이 없었습니다.

이 SVG 를 SVG 의 크기를 제어하는 ​​컨테이너 요소 에 포함하려고합니다 .

나는 500x309px를 목표로하고 있습니다.

어떤 조합의 width, height, viewBox그리고 preserveAspectRatio나를 SVG는 마스크거나 잘림없이이를 도울 수 있는가?

---

1. viewBox항상 표시하려는 콘텐츠의 경계 상자를 설명하는 SVG 요소에 반드시 속성이 있어야합니다 . (링크하는 파일은 그렇지 않습니다. 하나를 추가해야합니다.)

2. HTML 요소를 채우기 위해 당신의 SVG를 야기하기 위해, CSS 속성을 넣어 position:relative(또는 position:absolute또는 position:fixed해당되는 경우) 래퍼에 다음

3. 요소 의 CSS 속성 position:absolute을 설정 하여 <svg>요소가 내부에 배치되고 div를 채우도록합니다. (필요한 경우에도 적용하십시오 left:0; top:0; width:100%; height:100%.)

a viewBox와 SVG 크기가 올바르게 조정되면 preserveAspectRatio속성 의 기본값 이 원하는 작업을 수행합니다. 특히 기본값은 다음을 xMidYMid meet의미합니다.

• viewBox에서 설명하는 종횡비는 렌더링 할 때 유지됩니다.
  이에 비해의 값은 none균일하지 않은 스케일링을 허용합니다.
• viewBox는 항상 meet위 / 아래 또는 왼쪽 / 오른쪽 중 하나이며 '레터 박스'는 다른 차원을 내부에 유지합니다.
  이에 비해의 값은 sliceviewBox가 렌더링을 완전히 채우고 상단 / 하단 또는 왼쪽 / 오른쪽이 SVG 외부로 떨어지도록합니다.
• viewBox는 SVG 뷰포트 내에서 수직 및 수평 중앙에 유지됩니다.
  이에 비해의 값은 xMinYMax오른쪽 또는 위쪽에만 패딩을 사용하여 왼쪽 하단 모서리에 유지됩니다.

여기에서 라이브로 볼 수 있습니다 : http://jsfiddle.net/Jq3gy/2/

요소 preserveAspectRatio에 대한 명시 적 값을 지정 <svg>하고 "업데이트"를 눌러 이들이 렌더링에 미치는 영향을 확인합니다.

편집 : viewBox (거의 절반 바이트)를 사용 하여 단순화 된 버전의 미국지도를 만들고 정확한 요구 사항에 맞게 업데이트 된 데모에서 사용했습니다. http://jsfiddle.net/Jq3gy/5/

---

SVG 너비와 높이를 컨테이너 크기로 설정하고 preserveAspectRatio = none으로 설정합니다.

<div height="50" width="100">
  <svg preserveAspectRatio="none" viewBox="0 0 300 200"></svg>
</div>

과

$("svg").each(function(){
  this.width = this.parentNode.width;
  this.height = this.parentNode.height;
}

그게 다야. CSS 설정은 필요하지 않습니다.

개인적으로 viewBox를 SVG 내용 의 크기로 설정했습니다 . 따라서 제 예에서 SVG에로드하는 원본 이미지는 300x200입니다. 50x100 div에 맞게 축소됩니다. 그러나 viewBox 조작은 별도의 문제입니다.

---

불행히도 원시 SVG에 적용되는 답을 모르지만 Raphael.js에서는 다음과 같이했습니다.

var paper = Raphael('#container', your_container_width, your_container_height);
paper.setViewBox(realSvgWidth, realSvgHeight, true);

이 기술은 내 SVG를 경계에 맞게 조정했습니다.

도움이 되었기를 바랍니다.

참고 URL : https://stackoverflow.com/questions/9566792/scale-svg-to-container-without-mask-crop