<object>タグが埋め込まれた頑固なSVGをスケーリングするにはどうすればよいですか？

114

私はいくつかのSVGファイルがあることを指定widthしてheightだけでなく、viewboxこのように：

<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...

しかし、私が決めたサイズでブラウザに表示するにはどうすればよいですか？私はそれらを小さくして、試してみました：

<object width="400" data="image.svg"></object>

しかし、私は目に見えるスクロールバーを取得します。

SVGファイルをset widthおよびheightto に変更すると機能し100%ますが、SVGファイルで使用されているサイズに関係なく、HTMLでサイズを決定したいと考えています。これは可能ですか？

html  svg 
— ジトラックス
ソース
私は混乱しています、最後の文はあなたが探している解決策のように読みますか？SVGの幅/高さを100％/ 100％に設定すると、それをHTMLに任せて、描画する領域を定義しますか？
— マーク
3
問題は、svgファイルの生成に使用するライブラリーでこれを変更する方法が見つからなかったことです。そして、これをhtmlからオーバーライドできれば私には理にかなっています。だから基本的に私はsvgファイルを変更する以外に別の解決策があるのだろうかと思います。
— Zitrax 2009年

回答:

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あなたがそれを追加するために必要なすべてthisAserveAspectRatio = "xMinYMin meet"
— samccone
4
@samccone：ちょうどpreserveAspectRatio="xMinYMin meet"私には十分ではなかったようです。viewBox回答で述べたように、私も提供する必要がありました。残念！
— Frerich Raabe 2013
1
preserveAspectRatio="none"svgを任意の方法で拡張したい場合にも実行できます。
— Matt Crinklaw-Vogt 2013
5
:)「ビューボックス」=「ビューボックス」：私がやったのと同じ問題のために落ちてはいけない！
— Dr.Ü
また、私は、実際の幅と高さの属性を設定しなければならなかった100%として、この答えは述べました。
— ComFreek
35

2009年にこれを尋ねたとき、ここで与えられた答えはどれもうまくいきませんでした。今度は同じ問題が発生したので<img>、svgと一緒にタグと幅を使用するとうまくいくことに気付きました。

<img width="400" src="image.svg">
— ジトラックス
ソース
6
これは他のオプションよりもずっと簡単です！気になる人のために、ブラウザが<img>タグでSVGを処理できる表を示します。
— dimo414 2012年
5
これは、SVGにハイパーリンクがない場合に最適なパスになる可能性があります。そうでない場合、imgが不十分であり、embedなどの代替手段を使用する必要があります。
— sdupton
12
使用<img>すると、リンク、JavaScriptなどとのすべての対話性が失われます
— gilly3
5
マイナー：img要素はセルフクローズである必要があります<img width="400" src="image.svg"/>。
— Jan Aagaard、2012年
4
@JanAagaard：XHTML以外では、imgタグを閉じる必要はありません。
— PeterV.Mørch2013
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はWebページと同じドメインでホストされていますか？
— joeforker
1
それは（localhostから外部へ）ではなかったので、おそらくそれですが、簡単だったので、以下の答えを使用しました。
— 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"です。これが定義されていないどうやら場合、あなたは本当にそれを拡張または使用することによってあなたのためのCSSスケールそれを任せることはできないなどwidth: 100%など
— イゴール
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タグを使用しない場合は特に、正解です。パーフェクト！
— グレッグエリス
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 2009年
1

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.