그래서, 저는 HTML로 된 SVG 파일을 가지고 있는데, 제가 그 형식에 대해 들었던 것 중 하나는 확대 할 때 픽셀 화되지 않는다는 것입니다.
jpeg 또는 50×50 아이콘으로 저장할 수있는 모든 것을 알고 image_src에서 높이와 너비를 수동으로 설정하여 실제로 100×100 축소판 (또는 10×10)으로 표시합니다. 꼬리표.
그러나 SVG 파일은 object / embed 태그와 함께 사용되는 것으로 보이며 THOSE의 높이 또는 너비를 변경하면 사진에 더 많은 공간이 할당됩니다.
SVG 이미지가 실제로 파일 시스템에 저장된 것보다 작거나 크게 표시되도록 지정할 수있는 방법이 있습니까?
답변
.svg텍스트 편집기 (단지 XML)로 파일을 열고 상단에서 다음과 같은 내용을 찾습니다.
<svg ... width="50px" height="50px"...
너비 및 높이 속성을 지 웁니다. 기본값은 100 %이므로 컨테이너가 허용하는 범위까지 확장되어야합니다.
답변
다음을 시도하십시오.
-
내용물 누락 뷰 박스 SVG 태그에 설정된 높이와 높이 속성의 높이와 폭 값을 채운다
-
그런 다음 높이와 너비 를 원하는 백분율 값 으로 설정 하여 그림의 크기를 조정하십시오 . 행운을 빕니다.
-
고정 된 종횡비
preserveAspectRatio="X200Y200 meet(예 : 200px)를 설정하지만 필요하지 않습니다.
예 :
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="10%"
height="10%"
preserveAspectRatio="x200Y200 meet"
viewBox="0 0 350 350"
id="svg2"
version="1.1"
inkscape:version="0.48.0 r9654"
sodipodi:docname="namesvg.svg">
답변
이미지 태그 및 크기 이미지 태그에 svg를 표시하여 크기를 조정할 수 있습니다.
<img width="200px" src="lion.svg"></img>
답변
내 SVG에 viewBox및 preserveAspectRatio속성을 추가하는 것이 가장 좋습니다 . 뷰 박스는 SVG의 전체 너비와 높이를 다음 형식으로 설명해야합니다 0 0 w h.
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>
답변
컨테이너의 너비를 변경하면 소스 파일의 너비와 높이가 변경되지 않고 수정됩니다.
.SvgImage img{ width:80%; }
이것은 SVG 크기 조정 문제를 해결합니다. 당신은 당신의 요구 사항에 따라 모든 %를 줄 수 있습니다.
답변
다음 코드를 사용하십시오.
<g transform="scale(0.1)">
...
</g>
답변
다음은 https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44를 사용하여 경계를 가져 오는 예입니다 svg.getBox().
결국에는 svg에 연결하여 뷰 박스를 적절하게 설정할 수있는 숫자를 얻게됩니다. 그런 다음 부모 div에서 CSS를 사용하면 완료됩니다.
// get all SVG objects in the DOM
var svgs = document.getElementsByTagName("svg");
var svg = svgs[0],
box = svg.getBBox(), // <- get the visual boundary required to view all children
viewBox = [box.x, box.y, box.width, box.height].join(" ");
// set viewable area based on value above
svg.setAttribute("viewBox", viewBox);