When rotating, the SVG ellipses move towards the upper left corner

Why does my animated lp end up in the top left corner instead of centering? I've tried using transform-origin: center; but it's not working. Any help would be greatly appreciated.

Thank you in advance.

#Component_6_2{
  -webkit-transform-origin: center center;
  animation:spin 5s linear infinite;
  transform-box: fill-box;
  transform-origin: center  !important;

}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
<div class="lp slimmer" >

        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="592.296" height="521.557" viewBox="0 0 592.296 521.557">
          <defs>
            <linearGradient id="linear-gradient" x1="0.071" y1="0.758" x2="0.904" y2="0.257" gradientUnits="objectBoundingBox">
              <stop offset="0"/>
              <stop offset="1" stop-color="#444"/>
            </linearGradient>
            <linearGradient id="linear-gradient-2" x1="0.071" y1="0.758" x2="0.904" y2="0.257" xlink:href="#linear-gradient"/>
          </defs>
          <g id="Group_4" data-name="Group 4" transform="translate(-39.754 -48.233)">
            <g id="Component_6_2" data-name="Component 6 – 2" transform="translate(111.476 48.233)">
              <ellipse id="Ellipse_1" data-name="Ellipse 1" cx="260.287" cy="260.778" rx="260.287" ry="260.778" fill="url(#linear-gradient)"/>
              <ellipse id="Ellipse_2" data-name="Ellipse 2" cx="231.923" cy="231.924" rx="231.923" ry="231.924" transform="translate(31.036 31.748)" fill="url(#linear-gradient-2)"/>
              <ellipse id="Ellipse_3" data-name="Ellipse 3" cx="189.325" cy="189.325" rx="189.325" ry="189.325" transform="translate(68.902 69.613)" fill="url(#linear-gradient)"/>
              <ellipse id="Ellipse_4" data-name="Ellipse 4" cx="115.962" cy="115.962" rx="115.962" ry="115.962" transform="translate(144.632 145.345)" fill="#7f23fa"/>
              <text id="Wordt_je_slimmer_van_muziek_" data-name="Wordt je slimmer
        van muziek?" transform="translate(253.524 266.767)" fill="#fff" font-size="19" font-family="ProductSans-Bold, Product Sans" font-weight="700"><tspan x="-74.109" y="0">Wordt je slimmer</tspan><tspan x="-54.036" y="23">van muziek?</tspan></text>
            </g>
          </g>
        </svg>
    </a>
    </div>

htmlcssanimationsvgtransform

Answer №1

By adding an additional g element, you can prevent the inline translation from affecting the SVG element:

#Component_6_2_1{
  -webkit-transform-origin: center center;
  animation:spin 5s linear infinite;
  transform-box: fill-box;
  transform-origin: center;

}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
<div class="lp slimmer" >

        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="592.296" height="521.557" viewBox="0 0 592.296 521.557">
          <defs>
            <linearGradient id="linear-gradient" x1="0.071" y1="0.758" x2="0.904" y2="0.257" gradientUnits="objectBoundingBox">
              <stop offset="0"/>
              <stop offset="1" stop-color="#444"/>
            </linearGradient>
            <linearGradient id="linear-gradient-2" x1="0.071" y1="0.758" x2="0.904" y2="0.257" xlink:href="#linear-gradient"/>
          </defs>
          <g id="Group_4" data-name="Group 4" transform="translate(-39.754 -48.233)">
          <g id="Component_6_2_1">
            <g id="Component_6_2" data-name="Component 6 – 2" transform="translate(111.476 48.233)">
              <ellipse id="Ellipse_1" data-name="Ellipse 1" cx="260.287" cy="260.778" rx="260.287" ry="260.778" fill="url(#linear-gradient)"/>
              <ellipse id="Ellipse_2" data-name="Ellipse 2" cx="231.923" cy="231.924" rx="231.923" ry="231.924" transform="translate(31.036 31.748)" fill="url(#linear-gradient-2)"/>
              <ellipse id="Ellipse_3" data-name="Ellipse 3" cx="189.325" cy="189.325" rx="189.325" ry="189.325" transform="translate(68.902 69.613)" fill="url(#linear-gradient)"/>
              <ellipse id="Ellipse_4" data-name="Ellipse 4" cx="115.962" cy="115.962" rx="115.962" ry="115.962" transform="translate(144.632 145.345)" fill="#7f23fa"/>
              <text id="Wordt_je_slimmer_van_muziek_" data-name="Wordt je slimmer
        van muziek?" transform="translate(253.524 266.767)" fill="#fff" font-size="19" font-family="ProductSans-Bold, Product Sans" font-weight="700"><tspan x="-74.109" y="0">Wordt je slimmer</tspan><tspan x="-54.036" y="23">van muziek?</tspan></text>
            </g>
          </g>
          </g>
        </svg>
    </a>
    </div>

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

Issue with SVG animation causing unnecessary duplication of circle shapes when utilizing animateMotion

I have implemented animateMotion to create an animation along a path. Below is the code snippet that demonstrates this: <!DOCTYPE html> <html> <head> <title>Example Of Many Things!</title> </head> <body> ...

javascripthtmlsvg

What is the best way to translate these CSS properties into Mui?

I am currently in the process of transitioning my CSS code to utilize MUI's sx prop and styled() function. However, I have not been able to find any documentation on how to properly convert the following code to MUI syntax. Can someone assist me with ...

htmlcssreactjsmaterial-ui

Is it necessary to bring in CSS for the following page?

Should CSS be imported and used across multiple pages in a web application? Is the page structure outlined below considered acceptable, or is there a standard practice to follow? /pages /home index.js index.module.css /cart ...

cssreactjsnext.jsdirectory-structurereact-css-modules

integrating a CSS file into a Vue project

As a newcomer to Vue, I encountered some difficulties understanding how things function in Vue. One of the obstacles I faced was integrating my own custom CSS file into a project. I attempted to create a file called style.css within the src folder and add ...

cssvue.jsimportincludestyles

Dealing with interruptions in the sequence of results from a database request

Greetings! I am currently utilizing a customized base on Wordpress to organize and manage dog show results. The current setup displays the resulting array in a monolithic manner, which can be seen in the image here: https://i.sstatic.net/ka1SZ.png Howeve ...

phphtmlarrayswordpressoutput

Perform Jquery trigger on mobile by clicking, and on desktop by hovering

Despite encountering this question numerous times, I am still unable to find a solution. I have a dropdown menu and I want it to open on hover for desktop and on click for mobile devices. I attempted using the provided code, however, it only works after r ...

jquerycssmobileresizewindow

Automatically change the height of the UI element in HTML

I'm currently working on building a table view using the ul tag in HTML. Within the link provided, I've utilized two li tags to create a two-column layout. To visually represent the spaces occupied by the li tags, column dots, and row dots, I&apo ...

csshtml-lists

Tips for arranging Angular Material cards in columns instead of rows

I am currently developing a web application using Angular, and I've encountered an issue while trying to display cards in a vertical layout rather than horizontally. My goal is to have the cards fill up the first column (5-6 cards) before moving on to ...

htmlcssangularangular-material

Struggling to make the height attribute work in Bootstrap 4 alpha

I'm currently in the process of learning Bootstrap, and I've encountered an issue with the height attribute in version 4 (for example: "row h-25") not functioning properly. I attempted to add another CSS rule that sets the height of "container-f ...

htmlcssvisual-studiofrontendbootstrap-4

Codeigniter: Troubleshooting Session Variable Issues

Hey there! I'm facing an issue with my session variable in Codeigniter. I have set the session variable in my model, but when I try to access it in my view through the controller, the value of the session variable becomes null. Any suggestions on how ...

phphtmlcodeigniter

Display the jQuery validation message in the final td cell of the table

JavaScript Animation Library rules:{ gender: { required: true }, }, messages:{ gender: { required: "Please indicate your gender" }, }, errorPlacement: function (error, element) { if (element.attr("type") == "radio") { ...

javascriptjqueryhtml

There is a hidden delete button obscured by another element. What steps can be taken to bring that element to the forefront and make it visible?

I'm having trouble positioning a delete button in the top right corner of a collapsible box. Despite setting it to `visibility: visible`, I can't seem to get it to display at the top of the collapsible element. Any suggestions or ideas would be g ...

javascriptjqueryhtmlcss

Executing a function with the initial click

Is there a way to run a function only on the first click, without having it run every time? I already have another function running on window.onload, so I can't use that. Both functions work fine independently, but not together. Right now, I'm ca ...

javascripthtmlfunction

Align button text vertically in the middle using Flexbox with Bootstrap 4

Why is the text in the button displaying at the top instead of the center when using internet explorer? button { height: 100px; } <div class="container"> <button class="w-100 f-default-f btn btn-primary d-flex justify-content-between px-3"& ...

csstwitter-bootstrapflexboxbootstrap-4microsoft-edge

Use $.ajax to display the menu by capturing an array of elements {0}

Whenever I click on one of the DIV elements, a menu pops out on the side displaying more information about the clicked element. I can determine which element I'm clicking on, but I'm struggling to pass that information from jQuery to the PHP pag ...

javascriptphpjqueryhtmlajax

When displaying content within an iframe, toggle the visibility of div elements

I'm attempting to toggle the visibility of certain page elements based on whether the page is loaded in an iframe. <script>this.top.location !== this.location && (this.top.location = this.location);</script> The above code succes ...

javascripthtmlcssiframe

Utilizing BeautifulSoup for web scraping: Extracting a targeted column from an HTML table on a webpage

I am attempting to access the data within the second column with the code "CATAC2021" on the Shakemap Site using Python. The four letters that follow, such as aaaa, aaab, etc., serve as event IDs. Although I have tried the code below to extract the ID dat ...

pythonhtmlpython-3.xweb-scrapingscreen-scraping

Omitting an element from the CSS styling

How can I create a CSS selector that targets the text content within this snippet, excluding the <label> component? Essentially, I want to style the text in the div while leaving the label unchanged. <div id="edit-cc" class="form-item form-type ...

htmlcss

Issues arise with the functionalities of FireFox related to transformations and transitions

I've been working on my CSS and here is what I have: img.buttonImg { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: ...

cssfirefox

Tips for designing a CSS Grid that features a maximum width for the main content and a minimum width for the sidebar

I'm attempting to design a two-column CSS grid with a main content area that has a maximum width of 800px and a sidebar that has a minimum width of 200px: https://codepen.io/dash/pen/gOmXqGr The grid needs to be responsive: The yellow sidebar should ...

htmlcsscss-grid