<object> 태그가 포함 된 완고한 SVG를 어떻게 확장합니까? 432″ > … 하지만 내가

다음 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>.

답변

  1. 내용물 누락 뷰 박스 SVG 태그에 설정된 높이와 높이 속성의 높이와 폭 값을 채운다

  2. 그런 다음 높이와 너비 를 원하는 백분율 값 으로 설정 하여 그림의 크기를 조정하십시오 . 행운을 빕니다.

  3. 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에서 잘 작동합니다.