堆栈内存溢出
  简体   繁体   English

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

[英]How do I scale a stubborn SVG embedded with the <object> tag?

 原文  2009-03-13 22:51:16  4   9    html/ svg

问题描述

I have some SVG files that specifies width and height as well as viewbox like this: 我有一些指定width和height SVG文件以及像这样的viewbox ： 

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

but how to display them in the browser at a size I decide? 但是如何在浏览器中以我决定的大小显示它们？ I want them smaller and have tried: 我希望它们更小，并尝试过： 

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

but then I get visible scrollbars. 但后来我得到了可见的滚动条。

It works if I change the SVG files to set width and height to 100% instead, but I want to decide the size in the HTML regardless of what sizes are used in the SVG file. 如果我将SVG文件更改为将width和height设置为100% ，它可以工作，但我想确定HTML中的大小，而不管SVG文件中使用的是什么大小。 Is this possible ? 这可能吗 ？

9 个解决方案

解决方案1
 159  2010-08-14 19:41:21

You can add "preserveAspectRatio" and "viewBox" attributes to the <svg> tag to accomplish this. 您可以将“preserveAspectRatio”和“viewBox”属性添加到<svg>标记以完成此操作。

Open the .svg file in an editor and find the <svg> tag. 在编辑器中打开.svg文件并找到<svg>标记。 in that tag, add the following attributes: 在该标记中，添加以下属性： 

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

Replace {width} and {height} with some defaults for the viewBox. 将{width}和{height}替换为viewBox的一些默认值。 I used the values from the "width" and "height" attributes of the SVG tag and it seemed to work. 我使用了SVG标签的“width”和“height”属性中的值，它似乎有效。

Save the SVG and it should now scale as expected. 保存SVG，现在应该按预期进行扩展。

I found this information here: 我在这里找到了这个信息：

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

解决方案2
 33 已采纳  2011-11-15 13:49:33

当我在2009年回复时，这里给出的答案都没有给我带来帮助。因为我现在再次遇到同样的问题，我注意到使用<img>标签和宽度以及svg一起工作正常。 

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

解决方案3
 9  2009-08-08 04:43:31

You can reach into the embedded svg using JavaScript: 您可以使用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. 由于你的svg已经有了一个viewBox，Firefox应该将viewBox中的576像素宽度缩放到文档中的400像素宽度。 Other svgs might benefit from a new viewBox derived from the advertised width and height (these are often the same numbers). 其他svgs可能会受益于从广告的宽度和高度派生的新viewBox（这些通常是相同的数字）。 Other browsers might benefit from different svg tweaks. 其他浏览器可能会受益于不同的svg调整。

解决方案4
 9  2012-10-18 22:39:49

<body>

<div>
<object type="image/svg+xml" data="img/logo.svg">
   <img src="img/logo.svg" alt="Browser fail" />
</object>
</div>

img/logo.svg ... 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. 这个设置对我有用。

解决方案5
 7  2014-07-29 15:59:07

I encountered a problem where iOS on an iPad would not correctly resize SVG images in a <object> tag. 我遇到了一个问题，即iPad上的iOS无法在<object>标记中正确调整SVG图像的大小。

The CSS style would increase or decrease size of the <object> container, but the image inside of it would not be modified (on iPad, iOS 7). CSS样式会增加或减少<object>容器的大小，但不会修改其中的图像（在iPad，iOS 7上）。

The SVG images were exported from Adobe Illustrator, and the solution turned out to be replacing the width and height in this: 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%"

I needed to use the <object> tag because the <img> tag does not currently support embedding bitmapped images in SVG's. 我需要使用<object>标签，因为<img>标签目前不支持在SVG中嵌入位图图像。

解决方案6
 5  2011-09-16 19:30:06

  1. Set the missing viewbox and fill in the height and width values of the set height and height attributes in the svg tag 设置缺少的视图，并在svg标记中填写set height和height属性的高度和宽度值

  2. Then scale the picture simply by setting the height and width to the desired percent values. 然后，只需将高度和宽度设置为所需的百分比值即可缩放图片。 Good luck. 祝好运。

  3. You can set a fixed aspect ratio with preserveAspectRatio="x200Y200 meet, but it's not necessary 您可以使用preserveAspectRatio =“x200Y200 meet来设置固定的宽高比，但这不是必需的

eg 例如 

 <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
 3  2012-04-11 16:04:56

Just use CSS to make the browser resize the SVG! 只需使用CSS让浏览器调整SVG的大小！ Like so: <object style="width:30%"> See http://www.vlado-do.de/svg_test/ for more details. 如下所示： <object style="width:30%">有关详细信息，请参阅http://www.vlado-do.de/svg_test/ 。 I just also tried it locally with an SVG that has its width and height given in "pt". 我还在本地尝试了一个SVG，其宽度和高度以“pt”给出。 It works well in Firefox. 它在Firefox中运行良好。

解决方案8
 1  2014-05-04 13:48:24

Here is a PHP solution using QueryPath based on Jim Keller's answer. 这是一个使用QueryPath的PHP解决方案，基于Jim Keller的回答。

Once QueryPath is loaded just pass your svg script to the function. 加载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();
}

解决方案9
 1  2009-03-14 10:07:38

Let see. 让我们看看。 I had to refresh my memory on SVG, I haven't used it much these years. 我不得不刷新我对SVG的记忆，这些年来我还没有用过它。

From what I found today, it seems that if you specify dimension of objects without units, they have a fixed size (in pixels, I think). 从我今天发现的情况来看，似乎如果你指定没有单位的对象的维度，它们就有一个固定的大小（以像素为单位，我认为）。 Apparently, then, there is no way to resize them when you resize the SVG (it only change the viewport/canvas size). 显然，当你调整SVG大小时它没有办法调整它们的大小（它只改变视口/画布大小）。

Unless, as pointed out, you specify the size of the SVG in percentage OR specify a viewBox (eg. viewBox="0 0 600 500"). 除非，如指出的那样，您指定SVG的大小百分比或指定一个viewBox（例如，viewBox =“0 0 600 500”）。

Now, if you have no way to change the exported SVG, you are out of luck, I fear. 现在，如果你无法改变导出的SVG，我担心你运气不好。 What library do you use? 你用什么图书馆？

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 我如何在 <object> 以不同的比例标记？ - How can I display an SVG image within an <object> tag at a different scale? 如何通过对象标签在x和y轴上缩放svg？ - How to scale svg in x and y axis from a object tag? 如何缩放和居中显示SVG？ - How do I scale and center an inline SVG? 如何居中嵌入SVG文件？ - How do I center an embedded SVG File? 如何消除Shiny中FluidRows之间的顽固空白？ - How do I eliminate stubborn white space between fluidRows in Shiny? 带有对象标签的SVG在Safari中无法缩放 - SVG With Object Tag Doesn't Scale In Safari 如何根据容器的大小缩放 SVG 文本？ - How do I scale SVG text depending on the size of the container? 如何更改 <svg> 标记到 <img> 用js标记？ - How Do I Change an <svg> Tag To An <img> Tag with js? 将嵌入的 SVG 缩放到父 div - Scale embedded SVG to parent div 如何将AngularJS与SVG标签一起使用？ 我想从angular传递SVG标签中的参数 - How do I use AngularJS with SVG tag ? I want to pass a parameter in SVG tag from angular
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM