blocks|key|1606112|text|当我在2009年问这个问题时，这里给出的答案对我来说都不起作用。因为我现在又遇到了同样的问题，我注意到将<img>标记和宽度与svg一起使用可以很好地工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1606113|<img+width="400"+src="image.svg">|code-block|syntax|javascript|1606114|entityMap^0|1G|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

None of the answers given here worked for me when I asked this back in 2009. As I now had the same issue again I noticed that using the <code>&lt;img&gt;</code> tag and width together with an svg works fine.

<pre><code>&lt;img width="400" src="image.svg"&gt;
</code></pre>

blocks|key|1605494|text|您可以向<svg>标记添加"preserveAspectRatio“和"viewBox”属性来实现这一点。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1605495|在编辑器中打开.svg文件并找到<svg>标记。在该标记中，添加以下属性：|1605496|preserveAspectRatio="xMinYMin+meet"
viewBox="0+0+{width}+{height}"|code-block|syntax|javascript|1605497|将{width}和{height}替换为viewBox的一些默认值。我使用了SVG标记的"width“和"height”属性中的值，它似乎起作用了。|1605498|保存SVG，它现在应该可以按预期缩放。|1605499|我在这里找到了这个信息：|1605500|https://blueprints.launchpad.net/inkscape/%2Bspec/allow-browser-resizing|1605501|entityMap|0|LINK|mutability|MUTABLE|url|https://blueprints.launchpad.net/inkscape/%2Bspec/allow-browser-resizing^0|4|5|0|G|5|0|0|0|0|0|0|1Y|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1A|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1B|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|U|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

You can add "preserveAspectRatio" and "viewBox" attributes to the <code>&lt;svg&gt;</code> tag to accomplish this.

Open the .svg file in an editor and find the <code>&lt;svg&gt;</code> tag. 
in that tag, add the following attributes:

<pre><code>preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"
</code></pre>

Replace {width} and {height} with some defaults for the viewBox. I used the values from the "width" and "height" attributes of the SVG tag and it seemed to work.

Save the SVG and it should now scale as expected.

I found this information here:

<a href="https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing" rel="noreferrer">https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing</a>

blocks|key|1391395|text|<body>

<div>
<object+type="image/svg%2Bxml"+data="img/logo.svg">
+++<img+src="img/logo.svg"+alt="Browser+fail"+/>
</object>
</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1391396|img/logo.svg+...|unstyled|1391397|<svg
+++width="100%25"+
+++height="100%25"
+++viewBox="0+0+640+80"
+++xmlns="http://www.w3.org/2000/svg"
+++version="1.1"+/>|1391398|这个设置对我很有效。|1391399|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>&lt;body&gt;

&lt;div&gt;
&lt;object type="image/svg+xml" data="img/logo.svg"&gt;
 &lt;img src="img/logo.svg" alt="Browser fail" /&gt;
&lt;/object&gt;
&lt;/div&gt;
</code></pre>

img/logo.svg
...

<pre><code>&lt;svg
 width="100%" 
 height="100%"
 viewBox="0 0 640 80"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1" /&gt;
</code></pre>

This setup worked for me.

blocks|key|1390530|text|您可以使用JavaScript访问嵌入式svg：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1390531|var+svg+=+document.getElementsByTagName('object')[0].\
++contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');|code-block|syntax|javascript|1390532|由于您的svg已经有了viewBox，Firefox应该将viewBox中的576像素宽度缩放到文档中的400像素宽度。其他svgs可能受益于从广告的宽度和高度派生的新viewBox+(它们通常是相同的数字)。其他浏览器可能会从不同的svg调整中受益。|1390533|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can reach into the embedded svg using JavaScript:

<pre><code>var svg = document.getElementsByTagName('object')[0].\
 contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');
</code></pre>

Since your svg already has a viewBox, Firefox should scale the 576 pixel width in the viewBox to the 400 pixel width in your document. Other svgs might benefit from a new viewBox derived from the advertised width and height (these are often the same numbers). Other browsers might benefit from different svg tweaks.

blocks|key|1606457|text|我遇到一个问题，iPad上的iOS不能正确地调整<object>标记中的SVG图像的大小。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1606458|CSS样式将增加或减小<object>容器的大小，但其中的图像不会被修改(在iPad、iOS+7上)。|1606459|SVG图像是从Adobe+Illustrator导出的，解决方案最终替换了以下内容中的宽度和高度：|1606460|<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">|code-block|syntax|javascript|1606461|通过以下方式：|1606462|width="100%25"+height="100%25"|1606463|我需要使用SVG标记，因为<img>标记目前不支持在<object>中嵌入位图图像。|1606464|entityMap^0|O|8|0|B|8|0|0|0|0|0|D|5|Q|8|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|12|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|13|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|S|3|T|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|V|$]]

I encountered a problem where iOS on an iPad would not correctly resize SVG images in a <code>&lt;object&gt;</code> tag.

The CSS style would increase or decrease size of the <code>&lt;object&gt;</code> container, but the image inside of it would not be modified (on iPad, iOS 7).

The SVG images were exported from Adobe Illustrator, and the solution turned out to be replacing the width and height in this:

<pre><code>&lt;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"&gt;
</code></pre>

with:

<pre><code>width="100%" height="100%"
</code></pre>

I needed to use the <code>&lt;object&gt;</code> tag because the <code>&lt;img&gt;</code> tag does not currently support embedding bitmapped images in SVG's.

blocks|key|1391319|text|只需使用CSS让浏览器调整SVG的大小即可！如下所示：<object+style="width:30%25">查看http://www.vlado-do.de/svg_test/了解更多详细信息。我也只是在本地用一个宽度和高度以"pt“表示的SVG进行了尝试。它在Firefox中运行得很好。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1391320|entityMap|0|LINK|mutability|MUTABLE|url|http://www.vlado-do.de/svg_test/^0|R|Q|1J|W|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Just use CSS to make the browser resize the SVG!
Like so:
<code>&lt;object style="width:30%"&gt;</code>
See <a href="http://www.vlado-do.de/svg_test/" rel="nofollow">http://www.vlado-do.de/svg_test/</a> for more details. I just also tried it locally with an SVG that has its width and height given in "pt". It works well in Firefox.

blocks|key|1605397|text|让我们看看。我不得不在SVG上重温一下我的记忆，这些年我很少用到它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1605398|从我今天发现的情况来看，似乎如果你指定没有单位的对象的尺寸，它们有一个固定的大小(我想是以像素为单位)。显然，当您调整SVG大小时，没有办法调整它们的大小(它只改变视区/画布大小)。|1605399|除非如所指出的那样，以百分比形式指定SVG的大小或指定viewBox+(例如，viewBox="0+0+600+500")。|1605400|现在，如果您没有办法更改导出的SVG，恐怕您就不走运了。你使用的是什么库？|1605401|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

Let see. I had to refresh my memory on SVG, I haven't used it much these years.

From what I found today, it seems that if you specify dimension of objects without units, they have a fixed size (in pixels, I think). Apparently, then, there is no way to resize them when you resize the SVG (it only change the viewport/canvas size).

Unless, as pointed out, you specify the size of the SVG in percentage OR specify a viewBox (eg. viewBox="0 0 600 500").

Now, if you have no way to change the exported SVG, you are out of luck, I fear. What library do you use?

blocks|key|1391466|text|这是一个基于Jim+Keller的答案，使用QueryPath的PHP解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1391467|加载QueryPath后，只需将svg脚本传递给函数即可。|1391468|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();
}|code-block|syntax|javascript|1391469|entityMap|0|LINK|mutability|MUTABLE|url|http://querypath.org/^0|M|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

Here is a PHP solution using <a href="http://querypath.org/" rel="nofollow">QueryPath</a> based on Jim Keller's answer.

Once QueryPath is loaded just pass your svg script to the function.

<pre><code>function scaleableSVG($svg){
 $qp = qp($svg, 'svg');
 $width = $qp-&gt;attr('width');
 $height = $qp-&gt;attr('height');
 $qp-&gt;removeAttr('width')-&gt;removeAttr('height'); 
 $qp-&gt;attr('preserveAspectRatio', "xMinYMin meet");
 $qp-&gt;attr('viewBox', "0 0 $width $height");
 return $qp-&gt;html();
}
</code></pre>

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

<pre><code>&lt;svg width="576pt" height="432pt" viewBox="0 0 576 432" &gt; ...
</code></pre>

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

<pre><code>&lt;object width="400" data="image.svg"&gt;&lt;/object&gt;
</code></pre>

but then I get visible scrollbars.

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

How do I scale a stubborn SVG embedded with the <object> tag?

我有一些指定width和height以及viewbox的SVG文件，如下所示：<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...但是如何在浏览器中以我决定的大小显示它们呢？我想要更小的，并且已经尝试过了：<object width="400" data="image.svg"></object>但是我得到了可见的滚动条。如果我

问如何扩展一个嵌入了<object>标签的顽固的SVG？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何扩展一个嵌入了<object>标签的顽固的SVG？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何扩展一个嵌入了<object>标签的顽固的SVG？
EN