1

How can I display an SVG image within an object tag at a different scale than its original scale?

For example, if I have an SVG file saved as example.svg:

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="50" fill="orange"></circle>
</svg>

and I want to display this in page.html at a different scale:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <object type="image/svg+xml" data="/example.svg" width="50" height="50">
        </object>
    </body>
</html>

It ought to display a version of the svg scaled down to 50x50, but instead it keeps the scale the same and gives the image scrollbars.

However, if I do an inline SVG like the following, it works:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg"
            version="1.1"
            width="50"
            height="50"
            viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="50" fill="orange"></circle>
        </svg>
    </body>
</html>

I have tried various combinations of this, such as adding width="100" and height="100" into the .svg file, using preserveAspectRatio="xMidYMid meet", adding 'px' to the width and height values, using width and height = "100%" in the svg, and other things, but none of them have worked.

In my situation I can just include the svg inline, but I don't feel like it should be that hard to change the scale of the image. Plus I want the browser to be able to cache the image.

Once i belongs to you class, you need to initialize it inside its constructor

#include "MyClass.h"

// int i = 1;   <-- not here

MyClass::MyClass()
{
    i = 1; // here
}

and to initialize your object in main function just do something like that:

int main()
{
//    MyClass myObject = *new MyClass();  <-- myObject is not a pointer
    MyClass myObject;

    cout << myObject.i << endl;
    cin.get();
}
4

3 回答 3

3

您需要将 svg 元素的宽度和高度属性设置为 100%。然后它将被缩放到容器（对象元素）的大小。否则，它将仅以指定的确切尺寸（100 像素）显示。

<?xml version="1.0" encoding="UTF-8" ?>
<svg xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    viewBox="0 0 100 100"
    width="100%" height="100%">
    <circle cx="50" cy="50" r="50" fill="orange"></circle>
</svg>
于 2013-05-20T21:08:55.037 回答
3

SVG 区分大小写。如果您在 example.svg 中将 viewbox 更改为 viewBox 的正确大小写，那么它会按照您的意愿显示（至少它在 Firefox 和 Opera 上是这样，我没有尝试其他 UA）。

于 2013-05-16T06:23:35.527 回答
0

对我有用的是：我用视图框定义了 svg 的“基本”大小，并添加了属性“height=100% width=100%”。这意味着，svg 将占用其父元素的 100% 的宽度和高度。如果我将 SVG 放入<object>标签中，我只需定义每个 css 对象的大小，瞧，SVG 会自动调整其大小。在示例中，我缩放了一个 SVG，其中 viewbox 将大小定义为 100x100px 到 300x300px。

文件.svg

<svg viewBox="0 0 100 100" width="100%" height="100%">
 <path .... /> 
</svg>

HTML：

<object type="image/svg+xml" data="your/path/to/file.svg" class="icon"></object>

CSS：

object.icon{
    height:auto;
    width: 300px;
}
于 2019-03-02T16:23:09.637 回答