代码之家 › 专栏 › 技术社区 › Zitrax dudico

如何缩放嵌入<object>标记的顽固SVG?

svg html

106

Zitrax dudico · 技术社区 · 16 年前

我有一些SVG文件指定 width 和 height 以及 viewbox 这样地:

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

但是如何在浏览器中以我决定的大小显示它们呢?我希望它们更小,并且尝试过:

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

但是我看到了滚动条。

如果我将SVG文件更改为 宽度 和 高度 到 100% 相反,我想决定HTML中的大小,而不管SVG文件中使用的是什么大小。这有可能吗?

9 回复 | 直到 16 年前

156

zwol 14 年前

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

在编辑器中打开.svg文件并找到 <SVG & GT; 标签。在该标记中,添加以下属性:

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

将宽度和高度替换为视图框的某些默认值。我使用了svg标记的“宽度”和“高度”属性中的值,它似乎可以工作。

保存SVG,它现在应该按预期缩放。

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

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

Zitrax dudico 11 年前

当我在2009年问这个问题时,这里给出的所有答案对我都不起作用。因为我现在又遇到了同样的问题,我注意到使用 <img> 标签和宽度加上SVG可以很好地工作。

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

joeforker 15 年前

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

Stephan 12 年前

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

这个装置对我有效。

Andy Swift 10 年前

我遇到了一个问题,iPad上的iOS无法在 <object> 标签。

CSS样式将增大或减小 <对象& 容器,但里面的图像不会被修改(在ipad,ios 7上)。

SVG图像是从AdobeIllustrator导出的,解决方案最终取代了宽度和高度:

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

我需要使用 <对象& 标签因为 <img> 标记当前不支持在SVG中嵌入位图图像。

Lorenz Lo Sauer 13 年前

设置 丢失视窗 并在SVG标记中填写设置的高度和高度属性的高度和宽度值。
然后简单地按比例缩放图片 设置高度和宽度 到 期望百分比 价值观。祝你好运。
可以使用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">

Vlado 13 年前

只需使用CSS让浏览器调整SVG的大小! 像这样: <object style="width:30%"> 见 http://www.vlado-do.de/svg_test/ 了解更多详细信息。我也在本地用一个SVG进行了尝试,它的宽度和高度用“pt”表示。它在火狐中运行良好。

PhiLho 16 年前

让我们看看。我必须在SVG上刷新我的记忆,这些年我没有用太多。

从我今天的发现来看,如果你指定没有单位的物体的尺寸,它们的尺寸是固定的(我认为是像素)。显然,当您调整SVG的大小时,无法调整它们的大小(它只会更改视区/画布的大小)。

除非如前所述,您以百分比指定SVG的大小或指定一个viewbox(例如viewbox=“0 0 600 500”)。

现在,如果你没有办法改变出口的SVG,恐怕你运气不好。你用什么图书馆?

Dieter Gribnitz 10 年前

下面是一个使用 QueryPath 根据吉姆·凯勒的回答。

加载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();
}