web-dev-qa-db-ja.com

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

widthとheightに加えてviewboxを指定するSVGファイルがいくつかあります：

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

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

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

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

代わりにwidthとheightを100%に設定するようにSVGファイルを変更しても機能しますが、SVGで使用されるサイズに関係なくHTMLのサイズを決定したいファイル。これは可能ですか？

htmlsvg
109
Zitrax

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

<img width="400" src="image.svg">
32
Zitrax

これを行うには、<svg>タグに "preserveAspectRatio"および "viewBox"属性を追加します。

エディターで.svgファイルを開き、<svg>タグを見つけます。そのタグに、次の属性を追加します。

preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"

{width}と{height}をviewBoxのいくつかのデフォルトに置き換えます。 SVGタグの「幅」属性と「高さ」属性の値を使用しましたが、機能しているようです。

SVGを保存すると、予想どおりにスケーリングされるはずです。

私はこの情報をここで見つけました：

https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing

159
Jim Keller
<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" />

このセットアップは私のために働いた。

9
H Titan

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調整の恩恵を受ける可能性があります。

9
joeforker

IPad上のiOSが<object>タグ内のSVG画像のサイズを正しく変更できないという問題が発生しました。

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%"

<object>タグは現在SVGへのビットマップ画像の埋め込みをサポートしていないため、<img>タグを使用する必要がありました。

7
Andrew Swift

  1. missing viewboxを設定し、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">
5
Lorenz Lo Sauer

CSSを使用して、ブラウザーでSVGのサイズを変更するだけです！そのようです： <object style="width:30%">詳細については、 http://www.vlado-do.de/svg_test/ を参照してください。また、幅と高さを「pt」で指定したSVGでローカルに試しました。 Firefoxでうまく機能します。

3
Vlado

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();
}
1
Dieter Gribnitz

見てみましょう。 SVGで記憶を更新する必要がありましたが、最近はあまり使用していません。

私が今日見つけたものから、単位なしでオブジェクトの次元を指定すると、それらは固定サイズ（ピクセル単位で、私は思う）を持っているようです。どうやら、SVGのサイズを変更するときにそれらのサイズを変更する方法はありません（ビューポート/キャンバスのサイズのみが変更されます）。

指摘されているように、パーセンテージでSVGのサイズを指定しない限り、OR viewBoxを指定します（たとえば、viewBox = "0 0 600 500"）。

エクスポートされたSVGを変更する方法がない場合、運が悪いのではないかと心配しています。どのライブラリを使用していますか？

1
PhiLho