SVG动画图标可通过CSS放大

Question

在我的项目中，我使用svg图标。但是这个图标很小。我需要增加显示器的尺寸。

下面我插入图像作为参考。我正在尝试放大此图标。代码中也包含此 标记中的内容。 我需要增加显示器的尺寸。 所以我可以使用CSS来增大此SVG。我使用了很多方法，并看到了许多示例来增加svg的大小，但都无法以正确的方式进行。 我符号定义是

     <symbol id="saturnGif">
            <g style="transform-origin: 50px 50px 0px;">
                <g style="transform-origin: 50px 50px 0px; transform: scale(0.6);">
                    <g class="ld ld-swim-px" style="transform-origin: 50px 50px 0px; animation-duration: 1s; animation-delay: 4.23412s; animation-direction: normal;">
                        <g>
                            <g style="transform-origin: 50px 50px 0px;">
                                <path class="st10" d="M50,40.6c-23.5,0-42.5,4.2-42.5,9.4h14.2c0-3.5,12.7-6.3,28.3-6.3s28.3,2.8,28.3,6.3h14.2 C92.5,44.8,73.5,40.6,50,40.6z" fill="#f36c00" style="fill: rgb(243, 108, 0);"></path>
                            </g>
                            <g style="transform-origin: 50px 50px 0px;"><circle class="st1" cx="50" cy="50" r="25.7" fill="rgb(248, 178, 106)" style="fill: rgb(248, 178, 106);"></circle></g>
                            <g style="transform-origin: 50px 50px 0px;">
                                <path class="st28" d="M50,56.3c15.6,0,28.3-2.8,28.3-6.3H21.7C21.7,53.5,34.4,56.3,50,56.3z">
                                </path>
                            </g>
                            <g style="transform-origin: 50px 50px 0px;">
                                <path class="st10" d="M50,56.3c-15.6,0-28.3-2.8-28.3-6.3H7.5c0,5.2,19,9.4,42.5,9.4s42.5-4.2,42.5-9.4H78.3 C78.3,53.5,65.6,56.3,50,56.3z" fill="#f36c00" style="fill: rgb(243, 108, 0);"></path>
                            </g>
                            <metadata xmlns:d="https://loading.io/stock/" style="transform-origin: 50px 50px 0px;">
                                <d:name style="transform-origin: 50px 50px 0px;">saturn</d:name>
                                <d:tags style="transform-origin: 50px 50px 0px;">star,solar system,planet,saturn,astrology</d:tags>
                                <d:license style="transform-origin: 50px 50px 0px;">rf</d:license>
                                <d:slug style="transform-origin: 50px 50px 0px;">2ez0ua</d:slug>
                            </metadata>
                        </g>
                    </g>
                </g>
            </g>
        </symbol>

and **Style :**

    <style type="text/css" style="transform-origin: 50px 50px 0px;">
    @@keyframes ld-swim-px {
        0% {
            -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
        }

        12.5% {
            -webkit-transform: translate(1px, -2px) rotate(3deg);
            transform: translate(1px, -2px) rotate(3deg);
        }

        25% {
            -webkit-transform: translate(0, -3px) rotate(6deg);
            transform: translate(0, -3px) rotate(6deg);
        }

        37.5% {
            -webkit-transform: translate(-1px, -2px) rotate(3deg);
            transform: translate(-1px, -2px) rotate(3deg);
        }

        50% {
            -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
        }

        62.5% {
            -webkit-transform: translate(1px, 2px) rotate(-3deg);
            transform: translate(1px, 2px) rotate(-3deg);
        }

        75% {
            -webkit-transform: translate(0, 3px) rotate(-6deg);
            transform: translate(0, 3px) rotate(-6deg);
        }

        87.5% {
            -webkit-transform: translate(-1px, 2px) rotate(-3deg);
            transform: translate(-1px, 2px) rotate(-3deg);
        }

        100% {
            -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
        }
    }

    @@-webkit-keyframes ld-swim-px {
        0% {
            -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
        }

        12.5% {
            -webkit-transform: translate(1px, -2px) rotate(3deg);
            transform: translate(1px, -2px) rotate(3deg);
        }

        25% {
            -webkit-transform: translate(0, -3px) rotate(6deg);
            transform: translate(0, -3px) rotate(6deg);
        }

        37.5% {
            -webkit-transform: translate(-1px, -2px) rotate(3deg);
            transform: translate(-1px, -2px) rotate(3deg);
        }

        50% {
            -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
        }

        62.5% {
            -webkit-transform: translate(1px, 2px) rotate(-3deg);
            transform: translate(1px, 2px) rotate(-3deg);
        }

        75% {
            -webkit-transform: translate(0, 3px) rotate(-6deg);
            transform: translate(0, 3px) rotate(-6deg);
        }

        87.5% {
            -webkit-transform: translate(-1px, 2px) rotate(-3deg);
            transform: translate(-1px, 2px) rotate(-3deg);
        }

        100% {
            -webkit-transform: translate(0, 0) rotate(0deg);
            transform: translate(0, 0) rotate(0deg);
        }
    }

    .ld.ld-swim-px {
        -webkit-animation: ld-swim-px 3s infinite linear;
        animation: ld-swim-px 3s infinite linear;
    }
</style>
<style type="text/css" style="transform-origin: 50px 50px 0px;">
    .st0 {
        fill: #E0E0E0;
    }

    .st1 {
        fill: #F8B26A;
    }

    .st2 {
        fill: #F5E6C8;
    }

    .st3 {
        fill: #849B87;
    }

    .st4 {
        opacity: 0.2;
        fill: #F8B26A;
    }

    .st5 {
        opacity: 0.2;
        fill: #ABBD81;
    }

    .st6 {
        opacity: 0.5;
        fill: #F8B26A;
    }

    .st7 {
        opacity: 0.5;
        fill: #ABBD81;
    }

    .st8 {
        fill: none;
        stroke: #E0E0E0;
        stroke-width: 4;
        stroke-miterlimit: 10;
    }

    .st9 {
        fill: #666666;
    }

    .st10 {
        fill: #F47E60;
    }

    .st11 {
        fill: #ABBD81;
    }

    .st12 {
        fill: #A0C8D7;
    }

    .st13 {
        fill: #333333;
    }

    .st14 {
        fill: #FFFFFF;
        stroke: #1A1A1A;
        stroke-width: 6;
        stroke-linejoin: round;
        stroke-miterlimit: 10;
    }

    .st15 {
        fill: #666666;
        stroke: #1A1A1A;
        stroke-width: 6;
        stroke-linejoin: round;
        stroke-miterlimit: 10;
    }

    .st16 {
        fill: none;
        stroke: #1A1A1A;
        stroke-width: 6;
        stroke-miterlimit: 10;
    }

    .st17 {
        fill: #1A1A1A;
    }

    .st18 {
        fill: #FFFFFF;
        stroke: #1A1A1A;
        stroke-width: 6;
        stroke-miterlimit: 10;
    }

    .st19 {
        fill: #666666;
        stroke: #1A1A1A;
        stroke-width: 6;
        stroke-miterlimit: 10;
    }

    .st20 {
        fill: none;
        stroke: #FFFFFF;
        stroke-width: 6;
        stroke-miterlimit: 10;
    }

    .st21 {
        fill: none;
        stroke: #FFFFFF;
        stroke-width: 6;
        stroke-linejoin: round;
        stroke-miterlimit: 10;
    }

    .st22 {
        fill: #FFFFFF;
    }

    .st23 {
        fill: #353035;
    }

    .st24 {
        fill: #F5E169;
    }

    .st25 {
        fill: none;
        stroke: #ABBD81;
        stroke-width: 8;
        stroke-linecap: round;
        stroke-miterlimit: 10;
    }

    .st26 {
        fill: none;
        stroke: #E0E0E0;
        stroke-width: 8;
        stroke-linecap: round;
        stroke-miterlimit: 10;
    }

    .st27 {
        fill: #FFDC6C;
    }

    .st28 {
        fill: none;
    }

    .st29 {
        fill: #C59B6D;
    }

    .st30 {
        fill: #E6E6E6;
    }

    .st31 {
        fill: #77A4BD;
    }

    .st32 {
        fill: #6079BD;
    }

    .st33 {
        fill: #405A9E;
    }

    .st34 {
        fill: none;
        stroke: #405A9E;
        stroke-width: 1.1292;
        stroke-miterlimit: 10;
    }

    .st35 {
        fill: #7D5A41;
    }

    .st36 {
        fill: #E6CCAE;
    }

    .st37 {
        fill: #CC632F;
    }

    .st38 {
        fill: #998268;
    }

    .st39 {
        fill: #D4C097;
    }

    .st40 {
        fill: #A8A8A8;
    }

    .st41 {
        fill: #CCCCCC;
    }

    .st42 {
        fill: #999999;
    }

    .st43 {
        stroke: #000000;
        stroke-width: 1.8743;
        stroke-miterlimit: 10;
    }

    .st44 {
        fill: #FFFFFF;
        stroke: #000000;
        stroke-width: 1.1246;
        stroke-miterlimit: 10;
    }

    .st45 {
        fill: #FFDC6D;
    }

    .st46 {
        fill: #A0C8D7;
        stroke: #FFFFFF;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-miterlimit: 10;
    }

    .st47 {
        stroke: #F5E6C8;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-miterlimit: 10;
    }

    .st48 {
        fill: none;
        stroke: #F5E6C8;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-miterlimit: 10;
    }

    .st49 {
        fill: #FFFFFF;
        stroke: #F5E6C8;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-miterlimit: 10;
    }

    .st50 {
        fill: none;
        stroke: #F5E6C8;
        stroke-miterlimit: 10;
    }

    .st51 {
        stroke: #F5E6C8;
        stroke-width: 3;
        stroke-miterlimit: 10;
    }

    .st52 {
        stroke: #F5E6C8;
        stroke-miterlimit: 10;
    }

    .st53 {
        fill: none;
        stroke: #F5E6C8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .st54 {
        fill: none;
        stroke: #F5E169;
        stroke-width: 0.7105;
        stroke-miterlimit: 10;
    }

    .st55 {
        fill: none;
        stroke: #F5E169;
        stroke-width: 0.675;
        stroke-miterlimit: 10;
    }

    .st56 {
        fill: none;
        stroke: #F5E169;
        stroke-width: 0.6594;
        stroke-miterlimit: 10;
    }

    .st57 {
        fill: #1A1A1A;
        stroke: #F5E169;
        stroke-width: 0.8;
        stroke-miterlimit: 10;
    }

    .st58 {
        fill: #FF0000;
    }

    .st59 {
        fill: #D686A5;
    }

    .st60 {
        fill: #AFA5CD;
    }

    .st61 {
        opacity: 0.5;
        fill: none;
    }

    .st62 {
        opacity: 0.2;
        fill: #849B87;
    }

    .st63 {
        opacity: 0.2;
        fill: #A0C8D7;
    }

    .st64 {
        opacity: 0.2;
        fill: #77A4BD;
    }

    .st65 {
        opacity: 0.5;
        fill: #849B87;
    }

    .st66 {
        opacity: 0.5;
        fill: #A0C8D7;
    }

    .st67 {
        opacity: 0.5;
        fill: #77A4BD;
    }

    .st68 {
        fill: none;
        stroke: #333333;
        stroke-width: 4;
        stroke-miterlimit: 10;
    }

    .st69 {
        fill: #F5E6C8;
        stroke: #333333;
        stroke-width: 3;
        stroke-miterlimit: 10;
    }
</style>

Image for Reference

Answer 1

您需要为该符号赋予viewBox属性：

<symbol id="saturnGif" viewBox="24 34 52 32">

然后，当您使用符号时，给<use>元素一个宽度和一个高度。

<use xlink:href="#saturnGif" width="104" height="64" /> 

您还可以使用<use>和x属性来放置y。

 <svg viewBox="0 0 52 32"> 
 <symbol id="saturnGif" viewBox="24 34 52 32">

svg{border:1px solid}

<svg viewBox="0 0 200 200"> 
 <symbol id="saturnGif" viewBox="7 24 87 53">
            
                           
                                <path class="st10" d="M50,40.6c-23.5,0-42.5,4.2-42.5,9.4h14.2c0-3.5,12.7-6.3,28.3-6.3s28.3,2.8,28.3,6.3h14.2 C92.5,44.8,73.5,40.6,50,40.6z" fill="#f36c00" stroke="#f36c00" ></path>
                            
                            <circle class="st1" cx="50" cy="50" r="25.7" fill="rgb(248, 178, 106)" ></circle>
                            
                                <path class="st10" d="M50,56.3c-15.6,0-28.3-2.8-28.3-6.3H7.5c0,5.2,19,9.4,42.5,9.4s42.5-4.2,42.5-9.4H78.3 C78.3,53.5,65.6,56.3,50,56.3z" fill="#f36c00" stroke="#f36c00" ></path>
                            
        
   </symbol>
  <use xlink:href="#saturnGif" x="13" y="48" width="174" height="106"  >
 
  </use> 
 </svg>

如果您需要像嵌入式图标一样单独使用此符号，则可以对svg和符号使用相同的viewBox。如果使用的svg元素没有宽度和高度，但是具有viewBox属性，则svg元素将采用容器元素的宽度。

 <svg viewBox="0 0 52 32"> 
 <symbol id="saturnGif" viewBox="24 34 52 32">...</symbol>
 </svg>
 .......

 <div class="container">
 <svg viewBox="0 0 52 32"><use xlink:href="#saturnGif" /></svg> 
 </div>

接下来是我使用SMIL动画的动画版本。我正在为use元素设置动画：values属性表示动画的各个阶段。我正在对属性转换：attributeName="transform" type="rotate"进行动画处理，动画的持续时间为4秒：dur="4s"。动画发生在{x：100，y：100}点附近：

values =“ 0， 100,100 ; -5， 100,100 ; 0， 100,100 ; 5， 100,100 ; 0， 100,100 “

svg{border:1px solid;width:90vh}

<svg viewBox="0 0 200 200"> 
<symbol id="saturnGif" viewBox="7 24 87 53">            
<path class="st10" d="M50,40.6c-23.5,0-42.5,4.2-42.5,9.4h14.2c0-3.5,12.7-6.3,28.3-6.3s28.3,2.8,28.3,6.3h14.2 C92.5,44.8,73.5,40.6,50,40.6z" fill="#f36c00" stroke="#f36c00" ></path>
                            
<circle class="st1" cx="50" cy="50" r="25.7" fill="rgb(248, 178, 106)" ></circle>
                            
<path class="st10" d="M50,56.3c-15.6,0-28.3-2.8-28.3-6.3H7.5c0,5.2,19,9.4,42.5,9.4s42.5-4.2,42.5-9.4H78.3 C78.3,53.5,65.6,56.3,50,56.3z" fill="#f36c00" stroke="#f36c00" ></path>
</symbol>
<use xlink:href="#saturnGif" x="13" y="48" width="174" height="106"  >
     <animateTransform 
    	attributeType="XML" 
        attributeName="transform" 
        type="rotate"
        values="0,100,100; -5,100,100; 0,100,100; 5,100,100; 0,100,100" 
        dur="4s" 
        repeatCount="indefinite" />
</use> 
</svg>