SVG 动画图标使用 css 制作更大的尺寸

【问题标题】：SVG animated icon make bigger size with cssSVG 动画图标使用 css 制作更大的尺寸
【发布时间】：2019-10-13 14:10:45
【问题描述】：

在我的项目中，我使用 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

【问题讨论】：

    标签： css asp.net-mvc svg icons


    【解决方案1】：

    你需要给符号一个 viewBox 属性：

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

    然后，当您使用符号时，您会为 &lt;use&gt; 元素指定宽度和高度。 

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

    您还可以使用x 和y 属性定位&lt;use&gt;。 

     <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。如果您使用的是没有宽度和高度但具有 viewBox 属性的 svg 元素，则 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>

    【讨论】：

    • 我们应该旋转戒指
    • 您想如何旋转圆环？尽管您的 css 中有一些动画，但您正在制作一个不存在的动画 .ld.ld-swim-px
    • 我不想要这个动画，如果可以的话去掉这个动画，只添加环形动画，可以吗？
    猜你喜欢
    • 1970-01-01
    • 2019-08-31
    • 2014-05-12
    • 1970-01-01
    • 2020-07-30
    • 1970-01-01
    • 1970-01-01
    • 2013-01-22
    • 2018-06-15
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode