다음 width
과 height
같이 지정하는 SVG 파일 viewbox
이 있습니다.
<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...
하지만 내가 결정한 크기로 브라우저에 표시하는 방법은 무엇입니까? 나는 그들을 더 작게 원하고 시도했습니다.
<object width="400" data="image.svg"></object>
하지만 눈에 보이는 스크롤바가 나타납니다.
나는 세트에 SVG 파일을 변경하는 경우 그것은 작동 width
과 height
에 100%
대신,하지만 난에 관계없이 SVG 파일에 사용되는 어떤 크기의 HTML의 크기를 결정합니다. 이게 가능해 ?
답변
이를 위해 “preserveAspectRatio”및 “viewBox”속성을 <svg>
태그에 추가 할 수 있습니다 .
편집기에서 .svg 파일을 열고 <svg>
태그를 찾으십시오 . 해당 태그에 다음 속성을 추가하십시오.
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"
{width} 및 {height}를 viewBox의 일부 기본값으로 바꿉니다. SVG 태그의 “width”및 “height”속성 값을 사용했는데 제대로 작동하는 것 같습니다.
SVG를 저장하면 예상대로 확장됩니다.
여기에서이 정보를 찾았습니다.
https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing
답변
여기에 제공된 답변 중 어느 것도 2009 년에 이것을 물었을 때 저에게 효과가 없었습니다. 이제 동일한 문제가 다시 발생했기 때문에 <img>
태그와 너비를 svg와 함께 사용하면 잘 작동 한다는 것을 알았습니다 .
<img width="400" src="image.svg">
답변
JavaScript를 사용하여 포함 된 svg에 접근 할 수 있습니다.
var svg = document.getElementsByTagName('object')[0].\
contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');
svg에 이미 viewBox가 있으므로 Firefox는 viewBox의 576 픽셀 너비를 문서의 400 픽셀 너비로 조정해야합니다. 다른 svg는 광고 된 너비와 높이에서 파생 된 새로운 viewBox의 이점을 누릴 수 있습니다 (종종 동일한 숫자 임). 다른 브라우저는 다른 svg 조정의 이점을 누릴 수 있습니다.
답변
<body>
<div>
<object type="image/svg+xml" data="img/logo.svg">
<img src="img/logo.svg" alt="Browser fail" />
</object>
</div>
img / logo.svg …
<svg
width="100%"
height="100%"
viewBox="0 0 640 80"
xmlns="http://www.w3.org/2000/svg"
version="1.1" />
이 설정은 저에게 효과적이었습니다.
답변
iPad의 iOS가 SVG 이미지의 크기를 올바르게 조정하지 못하는 문제가 발생했습니다. <object>
태그 .
CSS 스타일은 <object>
컨테이너의 크기를 늘리거나 줄이지 만 내부 이미지는 수정되지 않습니다 (iPad, iOS 7).
SVG 이미지는 Adobe Illustrator에서 내보냈으며 솔루션은 다음과 같이 너비와 높이를 대체하는 것으로 나타났습니다.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="481.89px" height="294.843px" viewBox="0 0 481.89 294.843"
enable-background="new 0 0 481.89 294.843"
xml:space="preserve">
와:
width="100%" height="100%"
태그는 현재 SVG에 비트 맵 이미지 포함을 지원하지 <object>
않기 때문에 태그 를 사용해야했습니다 <img>
.
답변
-
내용물 누락 뷰 박스 SVG 태그에 설정된 높이와 높이 속성의 높이와 폭 값을 채운다
-
그런 다음 높이와 너비 를 원하는 백분율 값 으로 설정 하여 그림의 크기를 조정하십시오 . 행운을 빕니다.
-
preserveAspectRatio = “x200Y200 meet를 사용하여 고정 종횡비를 설정할 수 있지만 반드시 필요한 것은 아닙니다.
예 :
<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">
답변
CSS를 사용하여 브라우저에서 SVG 크기를 조정하십시오! 이와 같이 :
<object style="width:30%">
자세한 내용은 http://www.vlado-do.de/svg_test/ 를 참조하십시오. 또한 폭과 높이가 “pt”로 지정된 SVG로 로컬에서 시도했습니다. Firefox에서 잘 작동합니다.