Анимированный значок SVG увеличивает размер с помощью css
В моем проекте я использую значок svg. но этот значок очень маленький. Мне нужно увеличить размер дисплея.
Below I inserted image for the references. I am trying to big this icon. in this тег также присутствует в коде. Мне нужно увеличить размер дисплея. Итак, я могу использовать 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>
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
2
0
520
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 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>Если вам нужно использовать этот символ отдельно, как встроенный значок, вы можете использовать один и тот же 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>Как бы вы хотели повернуть кольцо? Хотя в вашем css есть некоторая анимация, вы анимируете несуществующий .ld.ld-swim-px
—
28.05.2019 13:51
Я не хочу эту анимацию, если возможно, то удалите эту анимацию и добавьте только кольцевую анимацию, это возможно?
—
29.05.2019 05:01
Другие вопросы по теме
DbSet<xxx>» не содержит определения для «Обновления» и не имеет доступного метода расширения «Обновление»
Как переименовать таблицу миграции в структуре сущностей?
Проблема с фильтрацией jsGrid при вызове данных из контроллера .net
Частные переменные внутри DelegatingHandler смешивают значения из других запросов
Страница макета входа ASP.NET MVC не отображает CSS
Почему нам также нужно передавать ViewBag SelectList в действие HttpPost?
Не удается развернуть ASP.NET MVC с разрешениями на запись для определенной папки
MySQL: не удалось войти в систему для пользователя
MVCGrid.NET — Как перезагрузить сетку?
Я получаю неправильный тип в Edit Controller, что мне делать?
Похожие вопросы
Почему `<input type='date' />` и `<input type='time' />` имеют проблемы с изменением в Firefox? Или я что-то упускаю?
Как я могу получить доступ к публичной переменной в laravel
Как активировать кнопку только тогда, когда файл загружен и проверены условия?
CSS - пользовательский радиус элемента?
Как установить цвет фона контейнера поиска, помещенного в синюю верхнюю панель?
Bootstrap input-group-prepend / регулировка ширины надстройки
Как сделать бутстрап-карусель с карточками
Я хотел бы применить margin-top внутри поля
Как я могу добавить пробел между этими логотипами в списке
Оставшиеся символы текстовой области не работают должным образом
Должны ли мы вращать кольцо