Issues with CSS animations and transformations on SVG files are not being resolved

I've been attempting to create a transform animation using an SVG file, but unfortunately, the animation or transform isn't functioning at all. I've taken the time to research this issue, however, I haven't found a solution yet. Can anyone provide some insight on this matter? The code snippet below represents the SVG file that was downloaded from Google. It seems like your post mainly consists of code; it would be beneficial to include additional context and details.

<svg className="katana" width={35} height={35} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <g id="flat">
    <path
      d="M43,43H38.952a2.3,2.3,0,0,1-2.273-1.926h0a4.816,4.816,0,0,0-3.642-3.962,4.728,4.728,0,0,0-5.695,3.834l-.021.128A2.3,2.3,0,0,1,25.048,43H21a6,6,0,0,0-6,6h5v3h8V49h8v3h8V49h5A6,6,0,0,0,43,43Z"
      fill="#746250"
    />
    <path
      d="M28,33H24V16a2,2,0,0,1,2-2h0a2,2,0,0,1,2,2Z"
      fill="#8d7761"
    />
    <path
      d="M40,34H36V16a2,2,0,0,1,2-2h0a2,2,0,0,1,2,2Z"
      fill="#8d7761"
    />
    <path
      d="M59,20H10.653a8.819,8.819,0,0,1-6.236-2.583L3,16H59a2,2,0,0,1,2,2h0A2,2,0,0,1,59,20Z"
      fill="#d9d9d9"
    />
    <path d="M59,16H46v4H59a2,2,0,0,0,0-4Z" fill="#b6534f" />
    <path
      d="M55,32H12a2,2,0,0,1-2-2h0a2,2,0,0,1,2-2H55Z"
      fill="#e06661"
    />
    <rect x="47" y="28" width="4" height="4" fill="#dededc" />
    <rect x="39" y="28" width="4" height="4" fill="#dededc" />
    <rect
      x="44"
      y="12"
      width="4"
      height="12"
      rx="2"
      ry="2"
      fill="#daa857"
    />
    <rect
      x="56.707"
      y="17"
      width="2"
      height="2"
      transform="translate(4.174 46.077) rotate(-45)"
      fill="#dededc"
    />
    <rect
      x="50.707"
      y="17"
      width="2"
      height="2"
      transform="translate(2.417 41.834) rotate(-45)"
      fill="#dededc"
    />
    <rect
      x="53.707"
      y="17"
      width="2"
      height="2"
      transform="translate(3.295 43.956) rotate(-45)"
      fill="#dededc"
    />
    <path
      d="M26,30h0a2,2,0,0,1,2,2V52a0,0,0,0,1,0,0H24a0,0,0,0,1,0,0V32A2,2,0,0,1,26,30Z"
      fill="#9a826a"
    />
    <path
      d="M40,52H36V32a2,2,0,0,1,2-2h0a2,2,0,0,1,2,2Z"
      fill="#9a826a"
    />
  </g>
</svg>

#flat

#flat:hover {
    animation-name: sumarai;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite; }

@keyframes samurai {
    0% {
        transform: rotate(0deg);
    }
    100% {    
        transform: rotate(360deg);
    } }
htmlcssanimationtransform

Answer №1

Give this a try:

svg:hover {
    transform: rotate(360deg);
    transition-timing-function: ease-in-out;
    transition-duration: 3s;
}

svg{
  width: 80%;
  height: 100vh;
  display: flex;
  margin: auto;
}
<svg className="katana" width={35} height={35} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <g id="flat">
    <path
      d="M43,43H38.952a2.3,2.3,0,0,1-2.273-1.926h0a4.816,4.816,0,0,0-3.642-3.962,4.728,4.728,0,0,0-5.695,3.834l-.021.128A2.3,2.3,0,0,1,25.048,43H21a6,6,0,0,0-6,6h5v3h8V49h8v3h8V49h5A6,6,0,0,0,43,43Z"
      fill="#746250"
    />
    <path
      d="M28,33H24V16a2,2,0,0,1,2-2h0a2,2,0,0,1,2,2Z"
      fill="#8d7761"
    />
    <path
      d="M40,34H36V16a2,2,0,0,1,2-2h0a2,2,0,0,1,2,2Z"
      fill="#8d7761"
    />
    <path
      d="M59,20H10.653a8.819,8.819,0,0,1-6.236-2.583L3,16H59a2,2,0,0,1,2,2h0A2,2,0,0,1,59,20Z"
      fill="#d9d9d9"
    />
    <path d="M59,16H46v4H59a2,2,0,0,0,0-4Z" fill="#b6534f" />
    <path
      d="M55,32H12a2,2,0,0,1-2-2h0a2,2,0,0,1,2-2H55Z"
      fill="#e06661"
    />
    <rect x="47" y="28" width="4" height="4" fill="#dededc" />
    <rect x="39" y="28" width="4" height="4" fill="#dededc" />
    <rect
      x="44"
      y="12"
      width="4"
      height="12"
      rx="2"
      ry="2"
      fill="#daa857"
    />
    <rect
      x="56.707"
      y="17"
      width="2"
      height="2"
      transform="translate(4.174 46.077) rotate(-45)"
      fill="#dededc"
    />
    <rect
      x="50.707"
      y="17"
      width="2"
      height="2"
      transform="translate(2.417 41.834) rotate(-45)"
      fill="#dededc"
    />
    <rect
      x="53.707"
      y="17"
      width="2"
      height="2"
      transform="translate(3.295 43.956) rotate(-45)"
      fill="#dededc"
    />
    <path
      d="M26,30h0a2,2,0,0,1,2,2V52a0,0,0,0,1,0,0H24a0,0,0,0,1,0,0V32A2,2,0,0,1,26,30Z"
      fill="#9a826a"
    />
    <path
      d="M40,52H36V32a2,2,0,0,1,2-2h0a2,2,0,0,1,2,2Z"
      fill="#9a826a"
    />
  </g>
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transform the styles from a React component into Cascading Style Sheets

I have been tasked with transitioning all the styles from the JavaScript file to the CSS file while ensuring the design remains intact. I am facing an issue where using the CSS styles breaks the search field design. The original design can be seen here: S ...

javascriptcssreactjs

Outlook fails to recognize table cell widths when there is an image present

Although this question has been asked previously, the solutions provided did not solve my issue. I am trying to set the width of the <td> element to 70%, but when I insert an image it is affecting the widths of received emails in Outlook (I use MS O ...

htmlcsshtml-tableoutlookhtml-email

In Firefox, the CSS height and width values are displayed as X pixels, whereas in Internet Explorer, they are automatically set to 'auto'

When it comes to measuring div box dimensions, jQuery can be a handy tool. Here is an example code snippet: $(document).ready(function(){ var h = $("#testbox").css("height"); }); Interestingly, the same code can give different results in different brow ...

javascriptjquerycssinternet-explorer

Scale transformation - I am aiming for it to exceed the limits, yet it remains contained within

Currently, I am working on enhancing my carousel by implementing a zoom effect when hovering over the images. However, I have encountered an issue where the image gets hidden within the div container and doesn't overflow as expected. I tried adjusting ...

javascriptcssreactjsnext.jssass

Problem with z-index in VueJS: Child div z-index not functioning within v-dialog

I am facing an issue where I have brought a span to display a loading image inside the v-Dialog of a vuejs screen. The problem is that the v-dialog has a z-index of 220 set as inline style, causing my new span (loading image) to appear below the v-dialog. ...

jquerycssvue.jsz-index

Can jQuery be used to change the functionality of a submit button, such as toggling between show, hide, and submit options?

I am having trouble toggling a button to either submit a form on click or reveal an input field, depending on whether the user clicks outside the input field to hide/collapse it. The issue arises when the user dismisses the input field and the submit butto ...

javascripthtmljquery

Increase and decrease a counter in Javascript by clicking on two separate image tags, with increments and decrements between 1 and 10

Hello! I really appreciate your help. I am currently facing the following issue: <div id="thumb1"> <img class="img-responsive" id="prova" src="img/thumb-up-dark.png" alt=""> <div id="pinline">0</div> ...

javascriptjqueryhtmlcsscounter

Border at the Top and Text Alignment Problem

I am working on a basic navigation bar that includes a hover effect. .navip { float: left; text-decoration: none; font-weight: lighter; } .navip > a { display: block; color: black; text-decoration: none; font-size: 20px; ...

htmlcssnavigation

What steps should I take to ensure that this modal remains persistent?

I am searching for a method to keep this modal persistent even after it appears. Currently, the user can easily close it by clicking outside of the div. <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title ...

javascriptcssmodal-dialogbootstrap-modal

Capture the item selected from the dropdown using ng-model to retrieve the name instead of the

I need help getting the name/text/html of the selected option in a dropdown using angular.js, rather than just its value. Currently, I have this setup which retrieves the value: Here is my HTML code snippet <select class="SelectCar" ng-model="Selected ...

javascripthtmlangularjs

Invisible and Unrestricted automatic playback

Why is auto play muted in both Firefox and Chrome? How can we code it so that browsers don't block it? Here's the code I'm using: <audio id="audio1" src="https://notificationsounds.com/storage/sounds/file-sounds-1217-relax ...

javascripthtmljquerycssaudio

Resizing an image that is being pulled from a database

I am currently working on a challenging database project that seems to have hit a minor cosmetic roadblock. The database I'm dealing with loads profiles into arrays for display using a PHP while loop, making it easy to display content and allow for a ...

phpcssimageresize

Having Difficulty Modifying the CSS Styles of a Specific Class

I've been struggling with a CSS styling issue for some time now. The problem lies in targeting the class for the thumbnail preview of vue2-dropzone (which shares similar properties with dropzone.js based on documentation). Each time I upload an image, ...

cssvue.jsdropzone.jsvue2-dropzone

Utilizing CSS3 to implement multiple backgrounds across various selectors

My goal is to set backgrounds in two different CSS classes, ideally utilizing CSS3's multiple background feature. I aim to achieve this with minimal markup and ensure it is universally applicable. For example: CSS .button { display: block; } . ...

htmlcss

Issue with displaying Bootstrap Tooltip

Recently, I launched a fresh website (currently residing on a sub-domain). However, I am facing an issue with the tooltip not showing up when hovering over the text Get the FinEco Bookmarklet. <span class="bookmarklet"><span class="fa fa-bookmark ...

htmlcsstwitter-bootstraptooltip

What causes TypeScript to interpret an API call as a module and impact CSS? Encountering a Next.js compilation error

My website development process hit a roadblock when I tried integrating Material Tailwind into my project alongside Next.js, Typescript, and Tailwind CSS. The compilation error that popped up seemed unrelated to the changes, leaving me baffled as to what c ...

csstypescriptnext.jscompiler-errorstailwind-css

How can I create eye-catching animations for Android applications?

Looking to enhance my Android skills by incorporating animations and games into my projects. How can I achieve this and are there any helpful tutorials available? Is it feasible to use jQuery for creating animations within an application? Primarily inter ...

androidjqueryanimation

Drag and drop a Jquery image onto the div with its top left corner

Drop targets: <div id="targetContainer" style="width:100px; height:100px;> <div id="tar_0-0" class="target" style="position: relative; float:left; width:50px; height:50px; background-color: #fff;"></div> <div id="tar_1-0" class="t ...

javascriptjqueryhtmldrag-and-drop

Can text be formatted differently based on its length and whether it wraps onto multiple lines?

Looking to display book titles on a webpage with varying lengths. Some are short enough to fit in one line, while others are longer and wrap onto two lines. Is it possible to apply different styles (such as color or line-height) for these two cases using ...

css

Styling a layout with two columns, centered with an offset

I have created a layout with two columns - one on the left and one on the right, with the left column containing two rows. However, I am looking to offset the center point of the column to the right so that the left column occupies about 60% of the space ...

htmlcss