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

【问题标题】：How do I scale a stubborn SVG embedded with the <object> tag?如何缩放嵌入 <object> 标签的顽固 SVG？
【发布时间】：2010-10-13 07:02:57
【问题描述】：

我有一些指定 width 和 height 以及 viewbox 的 SVG 文件，如下所示：

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

但是如何以我决定的大小在浏览器中显示它们？我希望它们更小并尝试过：

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

然后我得到可见的滚动条。

如果我将 SVG 文件更改为将 width 和 height 设置为 100%，它会起作用，但我想决定 HTML 中的大小，无论 SVG 文件中使用什么大小。这可能吗？

【问题讨论】：

我很困惑，最后一句读起来像您正在寻找的解决方案？将 SVG 宽度/高度设置为 100%/100% 让 HTML 来定义要在其中绘制它的区域？
问题是我没有办法在我用来生成 svg 文件的库中更改它。如果我可以从 html 覆盖它，这对我来说是有意义的。所以基本上我想知道除了更改 svg 文件是否还有其他解决方案。

标签： html svg

【解决方案1】：

我遇到了一个问题，即 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 中嵌入位图图像。

【讨论】：

这是正确的答案，特别是如果您有内联 SVG 并且不使用

【解决方案2】：

这是基于 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();
}

【讨论】：

【解决方案3】：

当我在 2009 年问这个问题时，这里给出的答案都不适合我。因为我现在再次遇到同样的问题，我注意到使用 <img> 标记和宽度以及 svg 可以正常工作。

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

【讨论】：

这比其他选项简单多了！如果有人好奇，这里有一张which browsers can handle SVG's in <img> tags 的表格。
如果SVG中没有超链接，这可能是最好的路径，否则img是不够的，仍然必须使用embed之类的替代方法。
当您使用<img> 时，您将失去与链接、javascript 等的所有交互性。
次要：img 元素应该是自闭合的，即<img width="400" src="image.svg"/>。
@JanAagaard：它是not required to close the img tag，XHTML 除外。

【解决方案4】：

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

这个设置对我有用。

【讨论】：

这实际上效果很好！真正重要的是实际定义viewBox="0 0 640 80"。显然，如果没有定义，你不能真正缩放它或让 CSS 为你缩放它，例如使用width: 100%等
这行得通！ tks，我需要将 svg 加载到对象中以访问 contentDocument 而不是“img”标签

【解决方案5】：

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

【讨论】：

【解决方案6】：

设置缺少的viewbox并在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">

【讨论】：

【解决方案7】：

您可以将“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

【讨论】：

#protip all you need to add it this preserveAspectRatio="xMinYMin meet"
@samccone：看来preserveAspectRatio="xMinYMin meet" 对我来说还不够。如答案中所述，我还需要提供viewBox。可惜！
如果您想以任意方式拉伸 svg，也可以使用 preserveAspectRatio="none"。
不要陷入和我一样的问题：“viewbox”！=“viewBox”:)
此外，我必须将实际宽度和高度属性设置为100%，如this answer 所述。

【解决方案8】：

您可以使用 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 可能会受益于从广告宽度和高度派生的新视图框（这些通常是相同的数字）。其他浏览器可能会受益于不同的 svg 调整。

【讨论】：

这给了我：Security error: attempted to read protected variable
svg 是否与您的网页托管在同一个域中？
它不是（本地主机到外部）所以可能就是这样，但是我最终使用了下面的答案，因为它更简单。

【解决方案9】：

让我们看看。我不得不刷新我对 SVG 的记忆，这些年我没怎么用过。

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

除非如上所述，您以百分比指定 SVG 的大小或指定视图框（例如 viewBox="0 0 600 500"）。

现在，如果您无法更改导出的 SVG，恐怕您就不走运了。你用什么库？

【讨论】：

matplotlib 中的 svg 后端。我尝试过 set_figwidth(val) 之类的函数，但它似乎不起作用，但我对这个库不是很熟悉，所以我可能正在查看错误的函数。