얼마나 어긋나면 좋은지 알고 있다면

<style>svg{border: 1px solid orange}</style>

<svg width="100" height="100">
  <circle cx="0" cy="0" r="30">
</svg>

<svg viewBox="-30, -30, 60, 60" width="100" height="100">
  <circle cx="0" cy="0" r="30">
</svg>

이 경우는 viewBox로 지정하는 것보다, 의 cx/cy 속성으로 어긋나는 것이 보통일지도

어긋나는 양을 모르는 경우

예를 들어 다음과 같은 경우

<svg width="200" height="70">
  <text text-anchor="start" x="40" y="20">
    Left alignment
  </text>
  <text text-anchor="end" x="40" y="50">
    Right alignment
  </txt>
</svg>

표시하고 있는 내용의 실 사이즈를 모르기 때문에 viewBox 의 값을 지정할 수 없다.
그러므로, 우선 묘화하고 나서 getBBox로 사이즈를 취득해 viewBox를 지정한다.

<svg id="fit" width="200" height="70">
  <text text-anchor="start" x="40" y="20">
    Left alignment
  </text>
  <text text-anchor="end" x="40" y="50">
    Right alignment
  </txt>
</svg>

자바스크립트

var fit = document.getElementById("fit");
var bbox = fit.getBBox();

fit.setAttribute(
  "viewBox", bbox.x + ", " + bbox.y + ", " + bbox.width + ", " + bbox.height
);

Reference

이 문제에 관하여(SVG 그리기 내용을 표시 영역에 피팅(ViewBox)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kojia/items/2ceabddac52a6493b7e6

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다