当前位置：theitroad>Html 如何缩放嵌入了 <object> 标签的顽固 SVG？

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

声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow 原文地址: http://stackoverflow.com/questions/644896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-28 23:26:47 　来源:igfitidea点击:

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

htmlsvg

提问by Zitrax

I have some SVG files that specifies widthand heightas well as viewboxlike this:

我有一些SVG文件，指定width和height以及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 widthand heightto 100%instead, but I want to decide the size in the HTML regardless of what sizes are used in the SVG file. Is this possible ?

如果我将 SVG 文件更改为 setwidth和heightto 100%，它会起作用，但我想决定 HTML 中的大小，而不管 SVG 文件中使用什么大小。这可能吗 ？

采纳答案by Zitrax

None of the answers given here worked for me when I asked this back in 2009. As I now had the same issue again I noticed that using the <img>tag and width together with an svg works fine.

当我在 2009 年问这个问题时，这里给出的答案都没有对我有用。因为我现在又遇到了同样的问题，我注意到将<img>标签和宽度与 svg 一起使用效果很好。

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

回答by Jim Keller

You can add "preserveAspectRatio" and "viewBox" attributes to the <svg>tag to accomplish this.

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

Open the .svg file in an editor and find the <svg>tag. in that tag, add the following attributes:

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

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

Replace {width} and {height} with some defaults for the viewBox. I used the values from the "width" and "height" attributes of the SVG tag and it seemed to work.

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

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

回答by H Titan

<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.

这个设置对我有用。

回答by joeforker

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. Other svgs might benefit from a new viewBox derived from the advertised width and height (these are often the same numbers). Other browsers might benefit from different svg tweaks.

由于您的 svg 已经有一个 viewBox，Firefox 应该将 viewBox 中的 576 像素宽度缩放到文档中的 400 像素宽度。其他 svg 可能会受益于从广告宽度和高度（这些通常是相同的数字）派生的新 viewBox。其他浏览器可能会受益于不同的 svg 调整。

回答by Andrew Swift

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 图像是从 Adob​​e 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 中嵌入位图图像。

回答by Lorenz Lo Sauer

  1. Set the missing viewboxand fill in the height and width values of the set height and height attributes in the svg tag

  2. Then scale the picture simply by setting the height and widthto the desired percentvalues. Good luck.

  3. You can set a fixed aspect ratio with preserveAspectRatio="x200Y200 meet, but it's not necessary

  1. 设置缺失的viewbox并在svg标签中填写设置的高度和高度属性的高度和宽度值

  2. 然后通过将高度和宽度设置为所需的百分比值来缩放图片。祝你好运。

  3. 您可以使用preserveAspectRatio="x200Y200 meet 设置固定纵横比，但这不是必需的

e.g.

例如

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

回答by Vlado

Just use CSS to make the browser resize the SVG! Like so: <object style="width:30%">See http://www.vlado-do.de/svg_test/for more details. I just also tried it locally with an SVG that has its width and height given in "pt". It works well in Firefox.

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

回答by Dieter Gribnitz

Here is a PHP solution using QueryPathbased 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();
}

回答by PhiLho

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="0 0 600 500"）。

Now, if you have no way to change the exported SVG, you are out of luck, I fear. What library do you use?

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

相关推荐

Html 在 IE 中填充文本输入......可能吗？

Html 在 IE 中填充文本输入......可能吗？

固定大小的容器元素中的中心图像（CSS、HTML）

固定大小的容器元素中的中心图像（CSS、HTML）

Html 将文本限制为同级图像的宽度/CSS 中的自动宽度

Html 将文本限制为同级图像的宽度/CSS 中的自动宽度

Html 在另一个 <section> 标签内有一个 <section> 标签是否有效？

Html 在另一个 <section> 标签内有一个 <section> 标签是否有效？

相关推荐
最近更新
标签