부모 컨테이너로 svg 스케일을 어떻게 만들 수 있습니까?

크기가 기본이 아닌 경우 인라인 svg 요소의 내용 스케일을 원합니다. 물론 별도의 파일로 만들 수 있고 그렇게 확장 할 수 있습니다.

index.html : <img src="foo.svg" style="width: 100%;" />

foo.svg : <svg width="123" height="456"></svg>

그러나 CSS를 통해 SVG에 스타일을 추가하고 싶습니다. 따라서 외부 스타일을 연결하는 것은 옵션이 아닙니다. 인라인 SVG 스케일을 만들려면 어떻게해야합니까?

이미지의 크기 조정 된 크기와 상관없이 SVG 이미지 내에 좌표를 지정하려면 viewBoxSVG 요소 의 속성을 사용하여 이미지 의 경계 상자가 이미지의 좌표계에 있는지 정의 하고 width및 height속성을 사용하여 너비 또는 높이는 포함 페이지와 관련이 있습니다.

예를 들어 다음과 같은 경우

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

10x20 픽셀의 삼각형으로 렌더링됩니다.

이제 너비와 높이 만 설정하면 SVG 요소의 크기가 변경되지만 삼각형의 크기는 조정되지 않습니다.

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

보기 상자를 설정하면 이미지의 좌표 시스템에서 주어진 상자가 주어진 너비와 높이 (페이지의 좌표 시스템)에 맞게 크기가 조정되도록 이미지를 변환합니다. 예를 들어 삼각형을 100px x 50px로 늘리려면

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

HTML 뷰포트의 너비까지 조정하려면 다음을 수행하십시오.

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

기본적으로 종횡비는 유지됩니다. 따라서 요소의 너비는 100 %, 높이는 50px로 지정하면 창이 매우 좁은 경우를 제외하고 실제로는 최대 50px의 높이까지만 확장됩니다.

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

실제로 가로로 늘리려면 다음을 사용하여 가로 세로 비율 보존을 비활성화하십시오 preserveAspectRatio=none.

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

(내 예제에서는 HTML 포함에 작동하는 구문을 사용하지만 예제를 StackOverflow에 이미지로 포함하려면 대신 다른 SVG에 포함 시키므로 유효한 XML 구문을 사용해야합니다)

48 시간의 연구 끝에, 나는 비례적인 스케일링을 얻기 위해 이것을하게되었습니다.

참고 :이 샘플은 React로 작성되었습니다. 이를 사용하지 않는 경우 낙타 케이스 항목을 하이픈으로 다시 변경하십시오 (예 : backgroundColor로 background-color변경하고 스타일을 Object다시로 변경 String).

<div
  style={{
    backgroundColor: 'lightpink',
    resize: 'horizontal',
    overflow: 'hidden',
    width: '1000px',
    height: 'auto',
  }}
>
  <svg
    width="100%"
    viewBox="113 128 972 600"
    preserveAspectRatio="xMidYMid meet"
  >
    <g> ... </g>
  </svg>
</div>

위의 샘플 코드에서 수행되는 작업은 다음과 같습니다.

뷰 박스

MDN : https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox

최소 x, 최소 y, 너비 및 높이

즉 : viewbox = "0 1000 1000"

Viewbox는 기본적으로 SVG에 그릴 크기와 위치를 알려주기 때문에 중요한 속성입니다. CSS를 사용하여 SVG 1000x1000 픽셀을 만들었지 만 뷰 박스가 2000x2000 인 경우 SVG의 왼쪽 상단 이 표시 됩니다.

처음 두 숫자 인 min-x 및 min-y는 SVG가 뷰 박스 내에서 오프셋되어야하는지 여부를 결정합니다.

내 SVG가 위 / 아래 또는 왼쪽 / 오른쪽으로 이동해야합니다.

이것을 검사하십시오 : viewbox = "50 50 450 450"

처음 두 숫자는 SVG를 왼쪽으로 50px, 위로 50px로 이동하고 두 번째 숫자는 450x450px의 뷰 박스 크기입니다. SVG가 500x500이지만 추가 패딩이있는 경우 해당 숫자를 조작하여 "보기 상자"내에서 이동할 수 있습니다.

이 시점의 목표는 해당 숫자 중 하나를 변경하고 어떻게되는지 확인하는 것입니다.

뷰 박스를 완전히 생략 할 수도 있지만, 그 시점에 설정 한 내용에 따라 마일리지가 달라집니다. 필자의 경험에 따르면 뷰 박스가 종횡비를 정의하는 데 도움이되므로 종횡비 유지와 관련된 문제가 발생합니다.

종횡비 보존

MDN : https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

내 연구에 따르면 다양한 종횡비 설정이 많이 있지만 기본 설정은 xMidYMid meet입니다. 나는 분명히 내 자신을 생각 나게하기 위해 그것을 내 위에 두었다. xMidYMid meet중간 점 X와 Y를 기준으로 비례 적으로 크기를 조정합니다. 즉, 뷰 박스의 중앙에 유지됩니다.

폭

MDN : https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width

위의 예제 코드를보십시오. 너비 만 높이를 설정하지 않는 방법에 주목하십시오. 컨테이너를 채우도록 100 %로 설정했습니다. 이것이이 스택 오버플로 질문에 가장 많이 기여하는 것입니다.

원하는 픽셀 값으로 변경할 수 있지만 최대 크기로 불어 넣은 다음 부모 컨테이너를 통해 CSS로 제어하는 ​​것처럼 100 %를 사용하는 것이 좋습니다. "적절한"제어권을 가지므로 이것을 권장합니다. 미디어 쿼리를 사용할 수 있고 미친 JavaScript없이 크기를 제어 할 수 있습니다.

CSS로 확장

위의 예제 코드를 다시 살펴보십시오. 이러한 속성이 어떻게 사용되는지 확인하십시오.

resize: 'horizontal', // you can safely omit this
overflow: 'hidden',   // if you use resize, use this to fix weird scrollbar appearance
width: '1000px',
height: 'auto',

이것은 추가이지만 적절한 종횡비를 유지하면서 SVG의 크기를 조정할 수있는 방법을 보여줍니다. SVG는 자체 종횡비를 유지하기 때문에 부모 컨테이너에서 너비를 조정할 수만 있으면되고 원하는대로 크기가 조정됩니다.

높이를 그대로 두거나 자동으로 설정하고 너비를 사용하여 크기 조정을 제어합니다. 반응 형 디자인으로 인해 종종 더 의미가 있기 때문에 너비를 선택했습니다.

사용중인 설정의 이미지는 다음과 같습니다.

이 질문의 모든 해결책을 읽고 여전히 혼란 스러우거나 필요한 것을 잘 모르는 경우 여기에서이 링크를 확인하십시오. 나는 그것이 매우 도움이된다는 것을 알았습니다.

https://css-tricks.com/scale-svg/

이 기사는 방대한 기사이지만 CSS를 사용하거나 사용하지 않고 SVG를 조작 할 수있는 모든 가능한 방법을 세분화합니다. 부담없이 커피를 마시거나 선택한 액체를 마시면서 읽으십시오.

다음과 같이 변환을 원할 것입니다.

JavaScript로 :

document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)");

CSS로 :

#yourtarget {
  transform:scale(2.0);
  -webkit-transform:scale(2.0);
}

SVG 페이지를 Group 태그로 감싸서 전체 페이지를 조작하도록 타겟팅하십시오.

<svg>
  <g id="yourtarget">
    your svg page
  </g>
</svg>

참고 : 스케일 1.0은 100 %입니다

혼란 스럽고이 CSS는 컨테이너가 이미지보다 큰 지점까지 Chrome 브라우저의 SVG를 포함하는 것으로 보입니다.

div.inserted-svg-logo svg { max-width:100%; }

FF + IE 11에서도 작동하는 것 같습니다.

SVG 파일을 변경하는 것은 나에게 공정한 해결책이 아니기 때문에 대신 상대 CSS 단위를 사용했습니다 .

vh, vw, %매우 편리합니다. height: 2.4vh;SVG 이미지에 동적 크기를 설정 하기 위해 CSS를 사용했습니다 .

또 다른 간단한 방법은

transform: scale(1.5);

currentScale 속성 조정은 IE (IE 11로 테스트)에서 작동하지만 Chrome에서는 작동하지 않습니다.