ウェブサイトでloading.svgを小さくするには

Question

私のproductfilterにローディングアニメーションがあります（THISページを参照）。左側のフィルタで選択すると、アニメーションが表示されます。今私は少しこれを小さくしたいと思いますが、私はこれを管理する方法を知らない。私は幅が&の高さを変更する場合。それはsvgのサイズを変更しますが、ウェブサイト上では同じサイズのままです（色が変わるのでキャッシュの問題ではありません）。どんな助けでも本当に感謝します。あなたのページにはお時間を

おかげで、

Sjoerd

Answer 1

は、ローダアニメーションを開くコードは"100%"に、SVGをロード<img>タグの幅と高さを設定しています。

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