121

I have some SVG files that specifies width and height as well as viewbox like this: 

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

but how to display them in the browser at a size I decide? I want them smaller and have tried:

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

but then I get visible scrollbars.

It works if I change the SVG files to set width and height to 100% instead, but I want to decide the size in the HTML regardless of what sizes are used in the SVG file. Is this possible ?

It does not include, but depends on Hibernate Core. Have a look at the detail page from MVN Repository to see the list of Hibernate EntityManager's dependencies.

Note that you can use the Maven Dependency Plugin to show detailed analysis of the dependencies resolved for your POM.

4

9 に答える 9

166

これを実現するには、「preserveAspectRatio」および「viewBox」属性を<svg>タグに追加します。

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

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

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

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

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

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

于 2010-08-14T19:41:21.487 に答える
35

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

<img width="400" src="image.svg">
于 2011-11-15T13:49:33.443 に答える
11 
<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" />

この設定は私にとってはうまくいきました。

于 2012-10-18T22:39:49.580 に答える
10

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

于 2009-08-08T04:43:31.827 に答える
9

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

CSS スタイルはコンテナーのサイズを増減しますが、<object>コンテナー内の画像は変更されません (iPad、iOS 7 の場合)。

SVG 画像は Adob​​e 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>

于 2014-07-29T15:59:07.700 に答える
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">
于 2011-09-16T19:30:06.830 に答える
4

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

于 2012-04-11T16:04:56.113 に答える
1

見てみましょう。SVG の記憶を更新する必要がありました。ここ数年あまり使用していませんでした。

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

指摘されているように、SVG のサイズをパーセンテージで指定するか、viewBox を指定しない限り (例: viewBox="0 0 600 500")。

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

于 2009-03-14T10:07:38.230 に答える