如何缩放嵌入<object>标签的顽固SVG？

114

我有一些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的大小，无论在SVG文件中使用什么尺寸。这可能吗？

html svg

— Zitrax
source

我很困惑，最后一句话看起来像您要寻找的解决方案？将SVG宽度/高度设置为100％/ 100％可以将其留给HTML来定义绘制区域吗？

— 在2009年

3

问题是我没有办法在用于生成svg文件的库中更改此设置。如果我可以从html覆盖它，那对我来说将是有意义的。因此，基本上我想知道是否还有其他解决方案，而不是更改svg文件。

— Zitrax

161

您可以将“ preserveAspectRatio”和“ viewBox”属性添加到<svg>标记中以完成此操作。

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

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

用一些默认的viewBox替换{width}和{height}。我使用了SVG标签的“宽度”和“高度”属性中的值，它似乎可以正常工作。

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

我在这里找到此信息：

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

— 吉姆·凯勒
source

2

#protip您需要添加的所有内容，这是一次prepareAspectRatio =“ xMinYMin Meet”

— samccone 2012年

4

@samccone：看来这preserveAspectRatio="xMinYMin meet"对我来说还不够。我还需要提供viewBox答案中提到的。可怜！

— Frerich Raabe

1

preserveAspectRatio="none"如果您想以任意方式扩展svg，也可以这样做。

— Matt Crinklaw-Vogt

5

不要爱上同一个问题，因为我所做的：“视框” =“视框” :)！

— Dr.Ü

此外，我必须将实际的width和height属性设置100%为，如答案所示。

— ComFreek '16

35

当我在2009年问这个问题时，这里给出的答案对我都不起作用。由于我现在又遇到了同样的问题，因此我注意到将<img>标记和宽度与svg一起使用是可以的。

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

— Zitrax
source

6

这比其他选项要简单得多！万一有人好奇，请使用下表在<img>标签中浏览器可以处理SVG。

— dimo414 2012年

5

如果SVG中没有超链接，这可能是最佳路径，否则，img不足，并且仍然必须使用嵌入等替代方法。

— sdupton

12

当你使用<img>你失去所有的联系互动，JavaScript等

— gilly3

5

次要：img元素应该是自封闭的，即<img width="400" src="image.svg"/>。

— Jan Aagaard 2012年

4

@JanAagaard：除了在XHTML中之外，不需要关闭img标签。

— Peter V.Mørch2013年

9

您可以使用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调整中受益。

— 乔福克
source

1

这给了我：Security error: attempted to read protected variable

— Zitrax

1

svg是否与您的网页托管在同一域中？

— joeforker 2011年

1

它不是（从本地主机到外部），所以可能是这样，但是由于更简单，我最终在下面使用了我的答案。

— Zitrax

9

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

此设置对我有用。

— H泰坦
source

这实际上效果很好！真正重要的是实际定义viewBox="0 0 640 80"。显然，如果没有定义，你真的不能缩放或让CSS规模为你使用如width: 100%等

— 伊戈尔

8

我遇到了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>标签，因为该<img>标签当前不支持在SVG中嵌入位图图像。

— 安德鲁·斯威夫特
source

这是正确的答案，尤其是如果您具有嵌入式SVG并且不使用<img标签！完善！

— 格雷格·埃利斯

5

设置缺少的视图框，并在svg标签中填写所设置的height和height属性的height和width值
然后只需将高度和宽度设置为所需的百分比值即可缩放图片。祝好运。
您可以使用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">

— 洛伦兹·洛索尔
source

3

只需使用CSS即可使浏览器调整SVG的大小！像这样： <object style="width:30%"> 有关更多详细信息，请参见http://www.vlado-do.de/svg_test/。我也刚刚在本地使用SVG对其进行了尝试，其宽度和高度在“ pt”中给出。它在Firefox中运行良好。

— 弗拉多
source

1

让我们看看。我不得不在SVG上刷新自己的记忆，这些年来我没有使用太多。

从我今天发现的情况来看，如果您指定不带单位的对象尺寸，则它们具有固定的大小（以像素为单位）。显然，当您调整SVG的大小时，没有办法调整它们的大小（它只会更改视口/画布的大小）。

除非有指出，除非您以百分比指定SVG的大小或指定viewBox（例如，viewBox =“ 0 0 600 500”）。

现在，如果您没有办法更改导出的SVG，恐怕您很不走运。您使用什么图书馆？

— hi
source

matplotlib中的svg后端。我已经尝试过像set_figwidth（val）这样的函数，但是它似乎无法正常工作，但是我对该库不是很熟悉，因此我可能正在看错函数。

— Zitrax

1

这是一个基于吉姆·凯勒（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();
}

— 迪特·格里布尼茨（Dieter Gribnitz）
source