<object> 태그가 포함 된 완고한 SVG를 어떻게 확장합니까?

114

다음 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의 크기를 결정합니다. 이게 가능해 ?

html  svg 
— Zitrax
소스
혼란 스러워요, 마지막 문장이 당신이 찾고있는 해결책처럼 읽혔나요? SVG 너비 / 높이를 100 % / 100 %로 설정하면 그릴 영역을 정의하기 위해 HTML에 맡기시겠습니까?
— 표시
3
문제는 내가 svg 파일을 생성하는 데 사용하는 라이브러리에서 이것을 변경할 방법을 찾지 못했다는 것입니다. 그리고 html에서 이것을 무시할 수 있다면 이해가 될 것입니다. 그래서 기본적으로 svg 파일을 변경하는 것보다 다른 해결책이 있는지 궁금합니다.
— Zitrax

답변:

161

이를 위해 "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

— 짐 켈러
소스
2
#protip 추가하는 데 필요한 모든 것이 preserveAspectRatio = "xMinYMin meet"
— samccone
4
@samccone : 그냥 preserveAspectRatio="xMinYMin meet"나에게 충분하지 않은 것 같습니다 . 나는 또한 viewBox답변에 언급 된대로 제공해야했습니다 . 안타깝다!
— Frerich Raabe 2013 년
1
preserveAspectRatio="none"임의의 방법으로 svg를 늘리려면 할 수도 있습니다 .
— Matt Crinklaw-Vogt
5
내가했던 것과 같은 문제에 빠지지 마십시오 : "viewbox"! = "
— viewBox
또한 이 답변100% 에서 설명한 대로 실제 너비 및 높이 속성을 로 설정해야했습니다 .
— ComFreek
35

여기에 제공된 답변 중 어느 것도 2009 년에 이것을 물었을 때 저에게 효과가 없었습니다. 이제 동일한 문제가 다시 발생했기 때문에 <img>태그와 너비를 svg와 함께 사용하면 잘 작동 한다는 것을 알았습니다 .

<img width="400" src="image.svg">
— Zitrax
소스
6
이것은 다른 옵션보다 훨씬 간단합니다! 궁금한 사람이 있으시면 브라우저가 <img> 태그에서 SVG를 처리 할 수 있는 표가 있습니다 .
— dimo414
5
SVG에 하이퍼 링크가없는 경우이 경로가 가장 좋은 경로 일 수 있습니다. 그렇지 않으면 img가 충분하지 않으며 여전히 embed와 같은 대안을 사용해야합니다.
— sdupton 2012-07-13
12
사용 <img>하면 링크, 자바 스크립트 등과의 모든 상호 작용을 잃게됩니다.
— gilly3
5
경미 : img 요소는 자체적으로 닫혀 있어야합니다 <img width="400" src="image.svg"/>.
— Jan Aagaard
4
@JanAagaard : XHTML을 제외하고 img 태그를 닫을 필요 가 없습니다 .
— Peter V. Mørch 2013 년
9

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 조정의 이점을 누릴 수 있습니다.

— 조 포커
소스
1
이것은 나에게 준 것 :Security error: attempted to read protected variable
— Zitrax
1
SVG가 웹 페이지와 동일한 도메인에서 호스팅됩니까?
— joeforker 2011
1
그것은 (로컬 호스트에서 외부로) 아니 었으므로 아마도 그럴 것입니다. 그러나 더 간단하기 때문에 아래 내 대답을 사용했습니다.
— Zitrax 2011
9 
<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" />

이 설정은 저에게 효과적이었습니다.

— H 타이탄
소스
이것은 실제로 아주 잘 작동합니다! 정말 중요한 것은 실제로 정의하는 것 viewBox="0 0 640 80"입니다. 이것이 정의되어 있지 않다면, 예를 들어 width: 100%등 을 사용하여 실제로 크기를 조정하거나 CSS를 사용하여 크기를 조정할 수 없습니다 .
— Igor
8

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가 있고 <img 태그를 사용하지 않는 경우 정답입니다! 완전한!
— Greg Ellis
5

  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">
— 로렌츠로 사우어
소스
3

CSS를 사용하여 브라우저에서 SVG 크기를 조정하십시오! 이와 같이 : <object style="width:30%"> 자세한 내용은 http://www.vlado-do.de/svg_test/ 를 참조하십시오. 또한 폭과 높이가 "pt"로 지정된 SVG로 로컬에서 시도했습니다. Firefox에서 잘 작동합니다.

— 블라도
소스
1

보자. SVG에 대한 기억을 새로 고쳐야했지만 최근에는 많이 사용하지 않았습니다.

오늘 제가 발견 한 바에 따르면, 단위가없는 물체의 크기를 지정하면 크기가 고정 된 것 같습니다 (픽셀 단위). 분명히 SVG 크기를 조정할 때 크기를 조정할 방법이 없습니다 (뷰포트 / 캔버스 크기 만 변경됨).

지적한대로 SVG의 크기를 백분율로 지정하거나 viewBox (예 : viewBox = "0 0 600 500")를 지정하지 않는 한.

이제 내 보낸 SVG를 변경할 방법이 없다면 운이 좋지 않을 것입니다. 어떤 도서관을 사용하십니까?

— 필로
소스
matplotlib의 svg 백엔드. set_figwidth (val)과 같은 기능을 시도했지만 작동하지 않는 것 같지만이 라이브러리에 익숙하지 않아 잘못된 기능을보고있을 수 있습니다.
— Zitrax
1

다음은 Jim Keller의 답변을 기반으로 QueryPath 를 사용하는 PHP 솔루션 입니다.

QueryPath가로드되면 svg 스크립트를 함수에 전달하기 만하면됩니다.

function scaleableSVG($svg){
    $qp = qp($svg, 'svg');
    $width = $qp->attr('width');
    $height = $qp->attr('height');
    $qp->removeAttr('width')->removeAttr('height');                       
    $qp->attr('preserveAspectRatio', "xMinYMin meet");
    $qp->attr('viewBox', "0 0 $width $height");
    return $qp->html();
}
— 디터 그리브 니츠
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.