如何在对象标签中以与其原始比例不同的比例显示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>
我尝试了各种组合，例如在.svg文件中添加width =“100”和height =“100”，使用preserveAspectRatio =“xMidYMid meet”，在宽度和高度值上添加'px'，使用width和svg中的height =“100％”等等，但没有一个有效。
在我的情况下，我可以只包括svg内联，但我觉得不应该很难改变图像的比例。另外，我希望浏览器能够缓存图像。
您需要将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>
SVG区分大小写。如果您将视图框更改为example.svg中viewBox的正确大小写，则会显示您想要的内容（至少在Firefox和Opera上我没有尝试其他UA）。
对我有用的是：我使用视图框定义svg的“基本”大小，并添加属性“height = 100％width = 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;
}