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>

but then I get visible scrollbars.

如果我将 SVG 文件更改为将 width和 height设置为 100%，那么它就可以工作，但是我想在 HTML 中决定大小，而不管 SVG 文件中使用的是什么大小。这可能吗？

99420 次浏览
小开

让我看看。我必须刷新我的记忆 SVG，我没有使用它多少年了。

从我今天的发现来看，似乎如果你指定的尺寸对象没有单位，他们有一个固定的大小(像素，我认为)。显然，当您调整 SVG 的大小时，没有办法调整它们的大小(它只改变 viewport/画布的大小)。

除非，如前所述，您以百分比指定 SVG 的大小，或者指定一个 viewBox (例如 viewBox = “00600500”)。

现在，如果您无法更改导出的 SVG，恐怕您就不走运了。你使用哪个图书馆？

小开

您可以使用 JavaScript 进入嵌入式 svg:

var svg = document.getElementsByTagName('object')[0].\
contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');

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.

小开

您可以向 <svg>标记添加“ presveAspectratio”和“ viewBox”属性来实现这一点。

在编辑器中打开. svg 文件并找到 <svg>标记。 在该标记中，添加以下属性:

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

用 viewBox 的某些默认值替换{ width }和{ height }。我使用了来自 SVG 标记的“ width”和“ height”属性的值，它似乎起作用了。

保存 SVG，它现在应该可以按预期伸缩了。

我在这里找到了这些信息:

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

小开

  1. 设置 不见了并在 svg 标记中填充 Set height 和 height 属性的 height 和 width 值

  2. 然后按照 设置高度和宽度到 期望百分比的值来缩放图片。祝你好运。

  3. 您可以设置一个固定的宽高比，其值为 presveAspectratio = “ 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">
小开
最佳答案

当我在2009年问这个问题时，这里给出的答案没有一个对我有用。由于我现在又遇到了同样的问题，我注意到使用 <img>标记和宽度以及 svg 可以很好地工作。

<img width="400" src="image.svg">
小开

Just use CSS to make the browser resize the SVG! Like so: <object style="width:30%"> 有关详细信息，请参阅 http://www.vlado-do.de/svg_test/。我只是在本地使用 SVG 进行了尝试，SVG 的宽度和高度以“ pt”表示。它在 Firefox 中运行良好。

小开 
<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" />

This setup worked for me.

小开

下面是一个使用 QueryPath的 PHP 解决方案，它基于 Jim Keller 的回答。

一旦加载了 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();
}
小开

我遇到了一个问题，iPad 上的 iOS 无法正确调整 <object>标签中 SVG 图像的大小。

CSS 样式将增加或减少 <object>容器的大小，但其内部的图像不会被修改(在 iPad，iOS7)。

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

with:

width="100%" height="100%"

我需要使用 <object>标记，因为 <img>标记目前不支持在 SVG 中嵌入位图图像。


提交答案