如何让我的loading.svg在网站上更小

Question

我的productfilter上有一个加载动画（显示在THIS页面上）。如果您在左侧的过滤器中进行选择，则会看到动画。现在我想让它变得更小但我不知道如何管理它。如果我改变宽度＆amp;身高等它改变了svg的大小，但在网站上它仍将保持相同的大小（不是缓存问题，因为颜色确实改变）。任何帮助都会非常准确。

感谢您的时间，

Sjoerd

Answer 1

在您的页面中，打开加载程序动画的代码是将加载SVG的<img>标记的宽度和高度设置为"100%"。

<img style="height: 100%;width: 100%" src=".../loading-spin.svg">

这告诉浏览器您希望将图像缩放到其父容器大小的100％。无论您使用何种图像格式，都会发生这种情况它与作为SVG的图像无关。如果它是GIF或PNG，情况也是如此。

动画的大小是因为父容器（<div>）的样式为600px x 600px。

#woof_svg_load_container {
    width: 600px;
    height: 600px;
    ...
}

如果您希望它更小，请修改该容器的CSS。例如：

#woof_svg_load_container {
    width: 200px;
    height: 200px;
    ...
}