I want to enlarge or reduce a button depending on the presence of an icon. The buttons are in a rectangle and I would like to realize it with the top margin, because the buttons also have rounded corners and only the top corners should be visible.
The goal is a representation like this
If I set the topmargin fix to 10 it looks good
If I calculate the value depending on whether an icon is present, the buttons without icon are correctly displayed deeper, but the buttons with icon sit too deep
Like the picture before the topmargin for the icon buttons is 10 but they are moved lower.
Any idea - the code for display.qml is reduced and does not show all the properties. if they are needed i will add them.
FooterButton.qml
Rectangle {
id: button
property string p_identity
property string p_icon
property string p_source
property string p_backgroundColor
property int p_topmargin: 10
height: 70
width: 80
Layout.leftMargin: 25
Layout.topMargin: p_topmargin
color: p_backgroundColor
radius: 10
border.color: "black"
border.width: 0
Connections {
target: m_screen;
onScreenChanged: {
p_icon = m_screen.getButtonIcon(p_identity)
p_source = (!p_icon || p_icon.length === 0) ? "" : "image://iconprovider/" + p_icon)
// p_topmargin = 10
p_topmargin = (!p_icon || p_icon.length === 0) ? 45 : 10
}
}
Footer.qml
Item {
id: footer
property string p_footerBackgroundColor: "yellow" //m_config.getColor(Colors.FooterBackground)
property string p_buttonBackgroundColor: m_config.getColor(Colors.ButtonBackground)
Rectangle { anchors.fill: parent; x: footer.x; y: footer.y; width: footer.width; height: footer.height; color: p_footerBackgroundColor
RowLayout{ anchors.fill: parent
FooterButton{ p_identity: "FB1"; p_backgroundColor: p_buttonBackgroundColor }
FooterButton{ p_identity: "FB2"; p_backgroundColor: p_buttonBackgroundColor }
FooterButton{ p_identity: "FB3"; p_backgroundColor: p_buttonBackgroundColor }
FooterButton{ p_identity: "FB4"; p_backgroundColor: p_buttonBackgroundColor }
FooterButton{ p_identity: "FB5"; p_backgroundColor: p_buttonBackgroundColor }
}
}
Display.qml
Item {
id: display
Header { x: 0; y: 0; width: display.width; height: p_headerHeight; visible: p_headerVisible; color: p_backgroundColor; p_buttonColor: p_buttonBackgroundColor }
Left { x: 0; y: p_headerHeight; width: p_borderWidth; height: p_contentHeight; color: "blue" }
Right { x: display.width - p_encoderWidth; y: p_headerHeight; width: p_encoderWidth; height: p_contentHeight; p_color: "magenta" }
Footer { x: 0; y: display.height - p_footerHeight; width: display.width; height: p_footerHeight; visible: p_footerVisible }
just making sure you're not over-engineering your problem, but, I want to point out that the standard Button has both icon support and the ability to change the background to a rounded Rectangle:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
footer: Frame {
background: Rectangle {
color: "yellow"
}
RowLayout {
anchors.horizontalCenter: parent.horizontalCenter
spacing: 20
AppButton {
//icon.source: "hammer.svg"
}
AppButton {
//icon.source: "hammer.svg"
}
AppButton {
icon.source: "hammer.svg"
}
AppButton {
//icon.source: "hammer.svg"
}
AppButton {
icon.source: "check.svg"
}
}
}
}
// AppButton.qml
import QtQuick
import QtQuick.Controls
Button {
width: 100
height: 100
background: Rectangle {
color: pressed ? palette.mid : palette.button
radius: 20
}
icon.source: "blank.svg"
icon.width: 64
icon.height: 64
}
// blank.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
</svg>
// hammer.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M29.64 25.462c-1.186-1.62-3.535-4.176-6.254-7.136-2.657-2.893-5.671-6.173-8.066-9.11a3.883 3.883 0 0 1-1.044-1.531 6.899 6.899 0 0 0-.215-1.271 3.427 3.427 0 0 1-.08-.348 7.985 7.985 0 0 1 3.153-1.61 25.43 25.43 0 0 1 4.095-.527l1.08-.043-1.14-1.239-.148-.035a24.293 24.293 0 0 0-5.123-.606A13.096 13.096 0 0 0 7.53 4.82c-.225.2-1.433 1.478-1.338 2.334.078.73-.212.949-.792 1.383a8.35 8.35 0 0 0-.558.444c-1.468-.125-1.92.252-3.014 1.16l-.39.32-.095.105a1.472 1.472 0 0 0-.277 1.24 7.214 7.214 0 0 0 2.294 3.029 2.25 2.25 0 0 0 2.404-.483 18.003 18.003 0 0 0 1.577-2.018 2.67 2.67 0 0 1 1.633-1.26 12.815 12.815 0 0 1 2.588.88c.11.046.2.077.277.104.05.018.111.032.116.036 4.108 5.004 6.896 8.936 8.93 11.807 1.401 1.976 2.413 3.404 3.3 4.412l.912 1.038a1.935 1.935 0 0 0 1.362.651l.078.001a1.939 1.939 0 0 0 1.334-.534l1.548-1.486a1.927 1.927 0 0 0 .22-2.52zM12.059 11.028l-.029.034c-.03-.012-.052-.018-.088-.033a10.285 10.285 0 0 0-3-.954 3.577 3.577 0 0 0-2.454 1.738 21.031 21.031 0 0 1-1.375 1.786c-.605.434-.936.519-1.313.338a6.931 6.931 0 0 1-1.792-2.446.85.85 0 0 1 .125-.305l.334-.275c1.045-.867 1.228-1.021 2.299-.933a1.02 1.02 0 0 0 .738-.247A7.72 7.72 0 0 1 6 9.337a2.27 2.27 0 0 0 1.186-2.288A3.785 3.785 0 0 1 8.19 5.571a12.232 12.232 0 0 1 7.706-2.565 20.9 20.9 0 0 1 2.624.178c-.523.076-1.076.173-1.614.298A9.024 9.024 0 0 0 13.34 5.3a1.176 1.176 0 0 0-.25 1.356 5.831 5.831 0 0 1 .19 1.1 3.345 3.345 0 0 0 .842 1.625 9.48 9.48 0 0 0-.994.683 7.036 7.036 0 0 0-1.068.964zm16.668 16.234l-1.547 1.485a.945.945 0 0 1-.678.256.924.924 0 0 1-.652-.312l-.912-1.038c-.853-.97-1.905-2.452-3.236-4.33-2.018-2.848-4.78-6.742-8.838-11.696a6.433 6.433 0 0 1 .875-.772 8.145 8.145 0 0 1 .964-.66l.09-.05C17.14 13 20.06 16.182 22.65 19.001c2.7 2.939 5.032 5.477 6.184 7.051a.923.923 0 0 1-.106 1.209z"/><path fill="none" d="M0 0h32v32H0z"/></svg>
// check.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M13.5 22.142L7.59 16.42l.636-.636L13.5 20.87 26.721 7.8l.637.637z"/><path fill="none" d="M0 0h32v32H0z"/></svg>
You can Try it Online!
I am working on nuxt 3 with element plus UI. I want to use the custom menu icon on element plus menu item <el-menu-item>
I have tried to import tried to import svg icon from asset folder but it didn't work
Currently
<el-menu-item index="/"><el-icon><Setting /></el-icon>Setting</el-menu-item>
What I want
<el-menu-item index="/"><el-icon><MySettingIcon /></el-icon>Setting</el-menu-item>
Try sth like this:
<el-menu-item class="test" index="1">
<template #title>
<el-icon
:size="iconSize"
color="#77B4F2"
><MySettingIcon/>
</el-icon>
</template>
</el-menu-item>
by importing your component:
components: {
MySettingIcon
}
Or you can use svg icon directly:
<el-menu-item class="test" index="1">
<template #title>
<el-icon
:size="iconSize"
color="#77B4F2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-lightning-fill"
viewBox="0 0 16 16"
>
<path
d="M5.52.359A.5.5 0 0 1 6 0h4a.5.5 0 0 1
.474.658L8.694 6H12.5a.5.5 0 0 1 .395.807l-7
9a.5.5 0 0 1-.873-.454L6.823 9.5H3.5a.5.5 0 0
1-.48-.641l2.5-8.5z"
/></svg>
</el-icon>
</template>
</el-menu-item>
EDIT
Here is sample MySettingIcon.vue component:
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-emoji-frown"
viewBox="0 0 16 16"
>
<path
d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"
/>
<path
d="M4.285 12.433a.5.5 0 0 0 .683-.183A3.498 3.498 0 0 1 8 10.5c1.295 0 2.426.703 3.032 1.75a.5.5 0 0 0 .866-.5A4.498 4.498 0 0 0 8 9.5a4.5 4.5 0 0 0-3.898 2.25.5.5 0 0 0 .183.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"
/>
</svg>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "my-setting-icon",
data() {
return {}
},
});
</script>
<style scoped>
.bi-emoji-frown:hover {
background-color: lightcoral;
border-radius: 8px;
}
</style>
You can put this into src/icons folder.
I'm trying to style my mat input field on an error by adding an error icon next to the clear field icon like this:
I can't find any way to add the icon. Thank you for your help in advance.
My HTML:
<button
*ngIf="value"
matPrefix
mat-icon-button
aria-label="Clear"
(click)="value = ''"
>
highlight_off
کلمه جدید
<input
class="word-input"
matInput
type="text"
[(ngModel)]="value"
id="word"
#wordInput
required
/>
error
کلمه ورودی قبلا وارد شدهاست
CSS:
::ng-deep .mat-error {
text-align: right;
font-size: 12px;
}
:host ::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid .mat-form-field-outline- thick,
:host ::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label,
.mat-error {
color: var(--error) !important;
}
Take a look how bootstrap make it in the docs
then, instead use as class is_invalid you can use .ng-invalid.ng-touched
.ng-invalid.ng-touched {
border-color: #dc3545;
padding-left: calc(1.5em + .75rem) !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: leftcalc(.375em + .1875rem) center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
NOTE: I change the rigth by left in padding and position the image
NOTE2: you can use any svg, e.g.
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc3545' stroke='none' viewBox='0 0 16 16'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/></svg>");
Update
If we are working with material angular, we need take account the "floating label"
So, we can use in styles.css
input.ng-invalid.ng-touched {
border-color: #dc3545;
padding-left: calc(1.5em) !important;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23dc3545' stroke='none' viewBox='0 0 16 16'><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/></svg>");
background-repeat: no-repeat;
background-position: left center;
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
mat-form-field.mat-mdc-form-field.ng-invalid.ng-touched:not(.mat-focused) .mat-mdc-floating-label.mdc-floating-label:not(.mdc-floating-label--float-above) {
transform: translate(1.5em,-.15rem);
}
See stackblitz
This question already has answers here:
How can I resize an SVG?
(3 answers)
Closed 11 months ago.
I created a svg component using the svgr playground.
const Logo = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" {...props}>
<path d="M5.857 18.708c1.638 0 2.995-.36 4.07-1.08 1.075-.721 1.613-1.769 1.613-3.144-.083-1.855-1.464-3.246-4.144-4.173l-1.44-.597c-.314-.1-.538-.198-.67-.298a.45.45 0 0 1-.198-.373c0-.414.273-.62.819-.62.678 0 1.182.347 1.513 1.043l3.698-1.044c-.893-2.22-2.614-3.329-5.162-3.329-1.522 0-2.788.398-3.797 1.193C1.15 7.08.645 8.116.645 9.39c0 .398.058.766.174 1.106.116.34.29.638.521.894.232.257.455.48.67.671.215.19.488.369.82.534.33.166.582.286.756.36.174.075.41.162.707.261l.422.15 1.49.546c.363.133.6.244.707.335a.449.449 0 0 1 .16.36c0 .431-.404.647-1.215.647-1.191 0-1.903-.53-2.134-1.59L0 14.509c.463 2.8 2.416 4.2 5.857 4.2zm11.636 0c1.638 0 2.845-.63 3.623-1.888v1.615h5.112V5.366h-5.112v7.156c0 1.474-.505 2.21-1.514 2.21-1.026 0-1.539-.736-1.539-2.21V5.366h-5.112v7.653c0 3.793 1.514 5.69 4.542 5.69zm16.103-.273V11.28c0-1.475.504-2.212 1.513-2.212 1.026 0 1.54.737 1.54 2.212v7.155h5.111v-7.652c0-3.793-1.513-5.69-4.541-5.69-1.638 0-2.846.63-3.623 1.888V5.366h-5.113v13.069h5.113zm15.383 0V11.28c0-1.475.504-2.212 1.514-2.212 1.025 0 1.538.737 1.538 2.212v7.155h5.113v-7.652c0-3.793-1.514-5.69-4.542-5.69-1.638 0-2.846.63-3.623 1.888V5.366h-5.113v13.069h5.113zM64.958 24l8.289-18.634H67.91l-2.532 6.684-2.258-6.684h-5.584l5.435 11.802L59.944 24h5.014zm13.67-5.292c1.638 0 2.995-.36 4.07-1.08 1.076-.721 1.614-1.769 1.614-3.144-.083-1.855-1.465-3.246-4.145-4.173l-1.44-.597c-.314-.1-.537-.198-.67-.298a.45.45 0 0 1-.198-.373c0-.414.273-.62.819-.62.678 0 1.183.347 1.514 1.043l3.698-1.044c-.894-2.22-2.614-3.329-5.162-3.329-1.522 0-2.788.398-3.797 1.193-1.01.795-1.514 1.83-1.514 3.105 0 .398.058.766.173 1.106.116.34.29.638.522.894.231.257.455.48.67.671.215.19.488.369.819.534.33.166.583.286.757.36.173.075.41.162.707.261l.422.15 1.489.546c.364.133.6.244.707.335a.449.449 0 0 1 .161.36c0 .431-.405.647-1.216.647-1.19 0-1.902-.53-2.134-1.59l-3.723.844c.464 2.8 2.416 4.2 5.857 4.2zm9.8-14.137c.91 0 1.613-.215 2.11-.646.495-.43.744-.977.744-1.64 0-.678-.24-1.23-.72-1.651C90.082.21 89.371 0 88.428 0c-.943 0-1.655.211-2.135.634-.48.422-.72.973-.72 1.652 0 .662.249 1.209.745 1.64.497.43 1.2.645 2.11.645zm2.556 13.864V5.366H85.87v13.069h5.113zm7.74.273c1.737 0 2.977-.63 3.722-1.888v1.615h5.112V.472h-5.112v6.534c-.745-1.275-1.985-1.913-3.723-1.913-1.753 0-3.214.642-4.38 1.926-1.166 1.283-1.75 2.91-1.75 4.882 0 1.97.584 3.598 1.75 4.882 1.166 1.283 2.627 1.925 4.38 1.925zm1.39-3.9c-.729 0-1.312-.274-1.75-.82-.439-.547-.658-1.243-.658-2.087 0-.845.215-1.54.645-2.087.447-.547 1.034-.82 1.762-.82s1.311.273 1.75.82c.438.546.657 1.242.657 2.087 0 .844-.219 1.54-.657 2.087-.439.546-1.022.82-1.75.82zm16.698 3.9c2.597 0 4.624-.754 6.08-2.26l-2.11-2.833c-1.042.845-2.217 1.267-3.524 1.267-.992 0-1.799-.224-2.42-.67-.62-.448-.93-.879-.93-1.293h9.604c.083-.298.124-.687.124-1.167 0-2.054-.674-3.677-2.022-4.87-1.349-1.193-3.073-1.789-5.175-1.789-2.25 0-4.028.671-5.335 2.013-1.307 1.341-1.961 2.956-1.961 4.844 0 1.938.69 3.549 2.072 4.833 1.382 1.283 3.247 1.925 5.597 1.925zm2.208-8.149h-5.112c.033-.613.298-1.08.794-1.404.496-.323 1.084-.484 1.762-.484.678 0 1.266.165 1.762.497a1.7 1.7 0 0 1 .794 1.391z" />
</svg>
);
export default Logo;
The problem is that whenever I try to change the size of the SVG (className="w-32 h-44" for example), only the "container" size changes. The actual content size is static.
You need to have viewBox to make the SVG scalable via classes.
From the devtools I saw the scale of your SVG as 124:24. So keep the same aspect ratio, I used, viewBox="0 0 124 24", where first two zeros specify x/y coord in SVG space.
Runnable Demo: https://codesandbox.io/s/stackoverflow-answer-on-svg-scaling-with-tailwind-css-qwdhzl?file=/src/App.js:24-3260
Tailwind Play: https://play.tailwindcss.com/QAe9s28wfr
const Logo = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 124 24" {...props}>
<path d="M5.857 18.708c1.638 0 2.995-.36 4.07-1.08 1.075-.721 1.613-1.769 1.613-3.144-.083-1.855-1.464-3.246-4.144-4.173l-1.44-.597c-.314-.1-.538-.198-.67-.298a.45.45 0 0 1-.198-.373c0-.414.273-.62.819-.62.678 0 1.182.347 1.513 1.043l3.698-1.044c-.893-2.22-2.614-3.329-5.162-3.329-1.522 0-2.788.398-3.797 1.193C1.15 7.08.645 8.116.645 9.39c0 .398.058.766.174 1.106.116.34.29.638.521.894.232.257.455.48.67.671.215.19.488.369.82.534.33.166.582.286.756.36.174.075.41.162.707.261l.422.15 1.49.546c.363.133.6.244.707.335a.449.449 0 0 1 .16.36c0 .431-.404.647-1.215.647-1.191 0-1.903-.53-2.134-1.59L0 14.509c.463 2.8 2.416 4.2 5.857 4.2zm11.636 0c1.638 0 2.845-.63 3.623-1.888v1.615h5.112V5.366h-5.112v7.156c0 1.474-.505 2.21-1.514 2.21-1.026 0-1.539-.736-1.539-2.21V5.366h-5.112v7.653c0 3.793 1.514 5.69 4.542 5.69zm16.103-.273V11.28c0-1.475.504-2.212 1.513-2.212 1.026 0 1.54.737 1.54 2.212v7.155h5.111v-7.652c0-3.793-1.513-5.69-4.541-5.69-1.638 0-2.846.63-3.623 1.888V5.366h-5.113v13.069h5.113zm15.383 0V11.28c0-1.475.504-2.212 1.514-2.212 1.025 0 1.538.737 1.538 2.212v7.155h5.113v-7.652c0-3.793-1.514-5.69-4.542-5.69-1.638 0-2.846.63-3.623 1.888V5.366h-5.113v13.069h5.113zM64.958 24l8.289-18.634H67.91l-2.532 6.684-2.258-6.684h-5.584l5.435 11.802L59.944 24h5.014zm13.67-5.292c1.638 0 2.995-.36 4.07-1.08 1.076-.721 1.614-1.769 1.614-3.144-.083-1.855-1.465-3.246-4.145-4.173l-1.44-.597c-.314-.1-.537-.198-.67-.298a.45.45 0 0 1-.198-.373c0-.414.273-.62.819-.62.678 0 1.183.347 1.514 1.043l3.698-1.044c-.894-2.22-2.614-3.329-5.162-3.329-1.522 0-2.788.398-3.797 1.193-1.01.795-1.514 1.83-1.514 3.105 0 .398.058.766.173 1.106.116.34.29.638.522.894.231.257.455.48.67.671.215.19.488.369.819.534.33.166.583.286.757.36.173.075.41.162.707.261l.422.15 1.489.546c.364.133.6.244.707.335a.449.449 0 0 1 .161.36c0 .431-.405.647-1.216.647-1.19 0-1.902-.53-2.134-1.59l-3.723.844c.464 2.8 2.416 4.2 5.857 4.2zm9.8-14.137c.91 0 1.613-.215 2.11-.646.495-.43.744-.977.744-1.64 0-.678-.24-1.23-.72-1.651C90.082.21 89.371 0 88.428 0c-.943 0-1.655.211-2.135.634-.48.422-.72.973-.72 1.652 0 .662.249 1.209.745 1.64.497.43 1.2.645 2.11.645zm2.556 13.864V5.366H85.87v13.069h5.113zm7.74.273c1.737 0 2.977-.63 3.722-1.888v1.615h5.112V.472h-5.112v6.534c-.745-1.275-1.985-1.913-3.723-1.913-1.753 0-3.214.642-4.38 1.926-1.166 1.283-1.75 2.91-1.75 4.882 0 1.97.584 3.598 1.75 4.882 1.166 1.283 2.627 1.925 4.38 1.925zm1.39-3.9c-.729 0-1.312-.274-1.75-.82-.439-.547-.658-1.243-.658-2.087 0-.845.215-1.54.645-2.087.447-.547 1.034-.82 1.762-.82s1.311.273 1.75.82c.438.546.657 1.242.657 2.087 0 .844-.219 1.54-.657 2.087-.439.546-1.022.82-1.75.82zm16.698 3.9c2.597 0 4.624-.754 6.08-2.26l-2.11-2.833c-1.042.845-2.217 1.267-3.524 1.267-.992 0-1.799-.224-2.42-.67-.62-.448-.93-.879-.93-1.293h9.604c.083-.298.124-.687.124-1.167 0-2.054-.674-3.677-2.022-4.87-1.349-1.193-3.073-1.789-5.175-1.789-2.25 0-4.028.671-5.335 2.013-1.307 1.341-1.961 2.956-1.961 4.844 0 1.938.69 3.549 2.072 4.833 1.382 1.283 3.247 1.925 5.597 1.925zm2.208-8.149h-5.112c.033-.613.298-1.08.794-1.404.496-.323 1.084-.484 1.762-.484.678 0 1.266.165 1.762.497a1.7 1.7 0 0 1 .794 1.391z" />
</svg>
);
For more info on SVG scaling check out CSS Tricks article,
https://css-tricks.com/scale-svg/
Adam Wathan (creator of Tailwind CSS) also has a vid on working with SVG: https://www.youtube.com/watch?v=MbUyHQRq2go&list=PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR&index=12
I've been trying to get this SVG animation of a washing machine, I'm almost there, but CSS is not my strong suit and I can center the moving tumble. Am I missing something obvious?
Thanks!
<svg viewBox="0 0 20 30">
<style>
#keyframes rotate {
0% {
visibility: visible;
transform: rotate(0deg);
}
100% {
transform: rotate(1080deg);
}
}
.on_no_delay {
animation: rotate 1.8s linear infinite;
transform-origin: center;
fill: #5daeea;
will-change: transform;
}
</style>
<path fill="#5daeea" d="M15.2,10.45,6.37,1.28h12a2,2,0,0,1,2,2v16a2,2,0,0,1-2,2h-12a2,2,0,0,1-2-2v-16a2,2,0,0,1,2-2m1,2a1,1,0,1,0,1,1,1,1,0,0,0-1-1m3,0a1,1,0,1,0,1,1,1,1,0,0,0-1-1M7,10.51A6,6,0,1,0,15.14,8,6,6,0,0,0,7,10.51Z"/>
<g class="tumble on_no_delay"><path d="M14.83,11.17a4,4,0,1,1-7.66,7.66l5.66-5.66"/></g>
</svg>
If you prepared svg properly, you wouldn't have this problem.
See what svg looks like when opened in a graphics program.
And it should be in this format.
Below the solution:
<svg viewBox="0 0 50 63">
<style>
#keyframes rotate {
0% {
visibility: visible;
transform: rotate(0deg);
}
100% {
transform: rotate(1080deg);
}
}
.on_no_delay {
animation: rotate 5s linear infinite;
transform-origin: center 60%;
fill: #5daeea;
will-change: transform;
}
</style>
<path d="M33.844 28.656 6.25 0h37.5C47.179 0 50 2.821 50 6.25v50c0 3.429-2.821 6.25-6.25 6.25H6.25C2.821 62.5 0 59.679 0 56.25v-50C0 2.821 2.821 0 6.25 0m3.125 6.25A3.14 3.14 0 0 0 6.25 9.375 3.14 3.14 0 0 0 9.375 12.5 3.14 3.14 0 0 0 12.5 9.375 3.14 3.14 0 0 0 9.375 6.25m9.375 0a3.14 3.14 0 0 0-3.125 3.125A3.14 3.14 0 0 0 18.75 12.5a3.14 3.14 0 0 0 3.125-3.125A3.14 3.14 0 0 0 18.75 6.25M8.219 28.844a18.745 18.745 0 0 0-2.14 8.698c0 10.286 8.464 18.75 18.75 18.75s18.75-8.464 18.75-18.75A18.774 18.774 0 0 0 33.656 21a18.755 18.755 0 0 0-8.827-2.208 18.772 18.772 0 0 0-16.61 10.052Z" style="fill:#5daeea;" />
<path class="tumble on_no_delay" d="M36.986 25.953a16.932 16.932 0 0 1 4.957 11.969c0 9.285-7.641 16.926-16.926 16.926a16.933 16.933 0 0 1-11.969-4.958l17.688-17.687" />
</svg>