如何缩放一个固定的<object>标签embedded的SVG？
我有一些SVG文件，指定width和height以及像这样的viewbox ：
<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...
但如何在浏览器中以我决定的大小显示它们？ 我希望他们更小，并尝试：
<object width="400" data="image.svg"></object>
但是然后我得到可见的滚动条。
如果我更改SVG文件，将width和height设置为100% ，但是我想要在HTML中决定大小，而不pipeSVG文件中使用了什么大小。 这可能吗 ？
您可以将“preserveAspectRatio”和“viewBox”属性添加到<svg>标签来完成此操作。
在编辑器中打开.svg文件，find<svg>标签。 在该标签中添加以下属性：
preserveAspectRatio="xMinYMin meet" viewBox="0 0 {width} {height}"
将{width}和{height}replace为viewBox的一些默认值。 我使用SVG标签的“宽度”和“高度”属性的值，它似乎工作。
保存SVG，现在应该按预期进行缩放。
我在这里find这个信息：
https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing
当我在2009年问过这个问题时，这里给出的答案都没有帮助。因为我现在再次遇到同样的问题，我注意到使用<img>标签和宽度与svg一起工作正常。
<img width="400" src="image.svg">
<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" />
这个设置为我工作。
您可以使用JavaScript访问embedded式svg：
var svg = document.getElementsByTagName('object')[0].\ contentDocument.getElementsByTagName('svg')[0]; svg.removeAttribute('width'); svg.removeAttribute('height');
由于您的svg已经有了一个viewBox，Firefox应该将viewBox中的576像素宽度缩放到文档中的400像素宽度。 其他svgs可能会从广告的宽度和高度（通常是相同的数字）派生出一个新的viewBox。 其他浏览器可能会受益于不同的SVG调整。
我遇到了一个问题，即iPad上的iOS无法正确调整<object>标记中的SVG图像的大小。
CSS样式会增加或减less<object>容器的大小，但其内部的图像不会被修改（在iPad，iOS 7上）。
SVG图像是从Adobe Illustrator导出的，解决scheme竟然取代了这个宽度和高度：
<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>标记，因为<img>标记当前不支持在SVG中embedded位图图像。
-
设置缺失的视图框，并在svg标签中填写高度和高度属性的高度和宽度值
-
然后通过将高度和宽度设置为所需的百分比值来缩放图片。 祝你好运。
-
您可以使用preserveAspectRatio =“x200Y200会面来设置固定宽高比，但这不是必需的
例如
<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">
只需使用CSS使浏览器调整SVG！ 像这样： <object style="width:30%">有关更多详细信息，请参见http://www.vlado-do.de/svg_test/ 。 我也尝试了一下在“pt”中给出的宽度和高度的SVG。 它在Firefox中运行良好。
让我们看看。 我不得不在SVG上刷新我的记忆，这些年来我一直没有用过它。
从我今天发现的情况来看，如果你指定没有单位的对象的尺寸，他们有一个固定的大小（以像素为单位，我认为）。 显然，那么当你调整SVG的大小时（没有改变视口/canvas的大小），没有办法调整它们的大小。
除非如指出的那样，你以百分比的forms指定了SVG的大小，或者指定了一个viewBox（例如viewBox =“0 0 600 500”）。
现在，如果你没有办法改变导出的SVG，那么我恐怕你倒霉了。 你用什么库？
这是一个基于Jim Keller的答案使用QueryPath的PHP解决scheme。
一旦加载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(); }
