SVG анимированная иконка большего размера с CSS - PullRequest
Новая
       11

SVG анимированная иконка большего размера с CSS

2 голосов
/ 28 мая 2019

В моем проекте я использую значок SVG. но эта иконка очень маленькая. Мне нужно увеличить размер дисплея.

Ниже я вставил изображение для ссылок. Я пытаюсь увеличить этот значок. в этом тег также присутствует в коде. Мне нужно увеличить размер дисплея. Так что я могу использовать CSS, чтобы увеличить это SVG. Я использую много способов и видел много примеров для увеличения размера SVG, но все они не работают должным образом. I Определение символа: 

     <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>

Изображение для справки

1 Ответ

1 голос
/ 28 мая 2019

Вам нужно будет дать символу атрибут 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>

Если вам нужно использовать этот символ отдельно, как встроенный значок, вы можете использовать один и тот же viewBox как для svg, так и для символа. Если вы используете элемент 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}:

значения = "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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...