[英]How do I scale a stubborn SVG embedded with the <object> tag?
我有一些指定width和height SVG文件以及像这样的viewbox ：
<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...
但是如何在浏览器中以我决定的大小显示它们？ 我希望它们更小，并尝试过：
<object width="400" data="image.svg"></object>
但后来我得到了可见的滚动条。
如果我将SVG文件更改为将width和height设置为100% ，它可以工作，但我想确定HTML中的大小，而不管SVG文件中使用的是什么大小。 这可能吗 ？
您可以将“preserveAspectRatio”和“viewBox”属性添加到<svg>标记以完成此操作。
在编辑器中打开.svg文件并找到<svg>标记。 在该标记中，添加以下属性：
preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"
将{width}和{height}替换为viewBox的一些默认值。 我使用了SVG标签的“width”和“height”属性中的值，它似乎有效。
保存SVG，现在应该按预期进行扩展。
我在这里找到了这个信息：
https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing
当我在2009年回复时，这里给出的答案都没有给我带来帮助。因为我现在再次遇到同样的问题，我注意到使用<img>标签和宽度以及svg一起工作正常。
<img width="400" src="image.svg">
您可以使用JavaScript访问嵌入式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调整。
<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" />
这个设置对我有用。
我遇到了一个问题，即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标记中填写set height和height属性的高度和宽度值
然后，只需将高度和宽度设置为所需的百分比值即可缩放图片。 祝好运。
您可以使用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">
只需使用CSS让浏览器调整SVG的大小！ 如下所示： <object style="width:30%">有关详细信息，请参阅http://www.vlado-do.de/svg_test/ 。 我还在本地尝试了一个SVG，其宽度和高度以“pt”给出。 它在Firefox中运行良好。
这是一个使用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();
}
让我们看看。 我不得不刷新我对SVG的记忆，这些年来我还没有用过它。
从我今天发现的情况来看，似乎如果你指定没有单位的对象的维度，它们就有一个固定的大小（以像素为单位，我认为）。 显然，当你调整SVG大小时它没有办法调整它们的大小（它只改变视口/画布大小）。
除非，如指出的那样，您指定SVG的大小百分比或指定一个viewBox（例如，viewBox =“0 0 600 500”）。
现在，如果你无法改变导出的SVG，我担心你运气不好。 你用什么图书馆？
我如何在 <object> 以不同的比例标记？
[英]How can I display an SVG image within an <object> tag at a different scale?
如何将AngularJS与SVG标签一起使用？ 我想从angular传递SVG标签中的参数
[英]How do I use AngularJS with SVG tag ? I want to pass a parameter in SVG tag from angular
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.