Question

如何以不同于原始比例的比例在对象标签中显示SVG图像？

例如，如果我将SVG文件保存为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>

我希望在page.html中以不同的比例显示：

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

它应该显示缩小到50x50的svg版本，但它保持比例相同并给出图像滚动条。

但是，如果我执行如下所示的内联SVG，它可以工作：

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

我尝试了各种组合，例如将width =“100”和height =“100”添加到.svg文件中，使用preserveAspectRatio =“xMidYMid meet”，将“px”添加到宽度和高度值，在svg和其他东西中使用width和height =“100％”，但它们都没有用。

在我的情况下，我可以直接包含svg，但我觉得改变图像的比例并不难。另外，我希望浏览器能够缓存图像。

Answer 1

您需要将svg元素的width和height属性设置为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>

Answer 2

SVG区分大小写。如果您将视图框更改为example.svg中viewBox的正确大小写，则会显示您想要的内容（至少在Firefox和Opera上我没有尝试其他UA）。

Answer 3

对我有用的是：我用视图框定义svg的“基本”大小，并添加属性“高度= 100％宽度= 100％”。这意味着svg将占用其父元素的宽度和高度的100％。如果将SVG放在<object>标记中，则只需按CSS和voila定义对象的大小，SVG就会自动调整其大小。在示例中，我缩放了SVG，其中视图框将尺寸定义为100x100px至300x300px。

file.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;
}

如何在不同比例的<object>标签中显示SVG图像？</object>

3 个答案: