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 1000×1000 픽셀을 만들었지 만 뷰 박스가 2000×2000 인 경우 SVG의 왼쪽 상단 이 표시 됩니다.

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

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

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

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

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

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

종횡비 보존

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를 조작 할 수있는 모든 가능한 방법을 세분화합니다. 부담없이 커피를 마시거나 선택한 액체를 마시면서 읽으십시오.

답변

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

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

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

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

transform: scale(1.5);