Html 是否可以使用CSS变换和转换缩放SVG图像？

我目前正在我的投资组合网站上工作。我正在使用Javascript在滚动时设置标题的动画（我已经跟随）

当你一直滚动到页面顶部时，它基本上会显示一个更大的标题和徽标。当您向下滚动到300像素以下时，它将使用CSS转换以优雅的方式降低标题的高度。较大的徽标将与较小版本的徽标交换（如下所示）。本教程不是为图像设计的，但我做了一些小改动，使之生效

.logo {
    display: block; 
    float: left;
    width: 180px; height: 60px;
    margin-top: 29px;
    background: url(../images/logo-large.svg); background-repeat: no-repeat;
    font: 0/0 a; text-shadow: none; color: transparent; 
}

.logo-shrink {
    display: block; 
     float: left;
    width: 90px; height: 30px;
    margin-top: 14px;
    background: url(../images/logo-small.svg); background-repeat: no-repeat;
    font: 0/0 a; text-shadow: none; color: transparent; 
}

我想知道是否有任何方法可以应用CSS转换和转换来减少交换的不一致性？有没有可能使用单个图像并将其放大或缩小？如果这是一个愚蠢的问题，我很抱歉，我对这个问题很陌生：）如果你需要我提供更多细节，请让我知道

任何帮助都将不胜感激：）

最简单的方法是使用：

e、 g

---

显然，您可以使用类或任何东西应用样式。

只需添加和删除类

。logo shrink

，而不是交换类。在类

.logo

中添加CSS转换

.logo {
    display: block; 
    float: left;
    width: 180px; height: 60px;
    margin-top: 29px;
    background: url(../images/logo-large.svg); background-repeat: no-repeat;
    font: 0/0 a; text-shadow: none; color: transparent; 
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.logo-shrink {
    width: 90px; height: 30px;
    margin-top: 14px;
}

---

如果动画感觉不稳定，那么您可以在父div上进行变换和转换，因为SVG1.1不允许在SVG标记上应用此样式（尽管我认为它在Webkit中无论如何都可以工作）。

使用jquery逐渐更改宽度和高度？图像不需要缩放；SVG是一种矢量格式。谢谢Elliott。我错误地认为变换比例会改变高度和宽度。有没有一种方法可以使用CSS逐渐改变SVG图像的宽度和高度？谢谢您的回复。我曾尝试在徽标上使用“变换比例”，但似乎不起作用，但正如Elliot指出的那样，我可能用了错误的方法。我尝试了你的建议Duopixel，动画非常平滑，但图像被裁剪而不是缩小。javascript当前正在删除和添加.logo收缩类。你还有其他建议吗？再次插入带有img标签的徽标，我为我的新朋友道歉，但你能帮我解释一下吗？我是否应该在logo div中添加logo并将其作为CSS中的背景删除？尝试添加背景大小：cover；to.logo（很抱歉我在手机上的格式设置不好）

.logo {
    display: block; 
    float: left;
    width: 180px; height: 60px;
    margin-top: 29px;
    background: url(../images/logo-large.svg); background-repeat: no-repeat;
    font: 0/0 a; text-shadow: none; color: transparent; 
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.logo-shrink {
    width: 90px; height: 30px;
    margin-top: 14px;
}