Animating an SVG in a circular motion starting from its central point with either CSS or XML

I've been grappling with the challenge of getting a part of my personal logo to rotate. My logo consists of "SB" and an asterisk, denoted as "st1," which is what I'm attempting to animate. Despite my attempts using XML and CSS, I've encountered the issue where the asterisk rotates but not from the center. I've scoured through similar posts and implemented various suggestions, yet none seem to work.

<?xml version="1.0" encoding="utf-8"?>
    
    <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    
    
    <svg width="100" height="100" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 347.3 224" style="enable-background:new 0 0 347.3 224;" xml:space="preserve">
     ...
     ...

cssxmlanimationsvgcss-animations

Answer №1

To determine the center, utilize getBBox and update the animateTransform values accordingly. Afterwards, you can eliminate the getBBox call. An alternative approach involves creating the animateTransform element using a script and integrating the center value calculated from the getBBox operation.

bbox = document.getElementById("g").getBBox();
alert((bbox.x + bbox.width/2) + ", " + (bbox.y + bbox.height / 2));
    <?xml version="1.0" encoding="utf-8"?>
    
    <!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    
    <!-- SVG content here -->

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 background image not resizing or repeating correctly on mobile devices

My website header is not scaling properly on mobile devices, causing some issues. The background color with white text using Bootstrap and custom CSS is not extending across the screen on smartphones or when viewed in Chrome Dev Tools. As a result, two ma ...

htmlcsstwitter-bootstrap

Utilizing jQuery to highlight and customize portfolio items with odd numbers

I'm currently trying to rearrange the module header and portfolio image for odd-numbered portfolio items. Feel free to check out my sandbox here. I thought the code below might do the trick, but it's a no-go. jQuery(document).ready(function($){ ...

jquerycsscss-selectorsjquery-selectorschildren

Custom Tooltips arrow is not receiving the CSS styling

I have implemented ReactTooltip from the ReactTooltip library You can view an example here Component Setup <ReactTooltip className={styles.customTheme} id={id} place={placement} effect="solid"> {children} </ReactTooltip> Stylin ...

javascriptcssreactjssasstooltip

How to Perfectly Align a Gif

I'm trying to understand the functionality behind this code snippet. Can anyone shed some light on it? img{ display:block; margin:auto; } I attempted to center a gif using this code block after my teacher suggested trying align:center; without succe ...

htmlcssmargin

Styling the button in jQuery to switch between disabled and enabled

I'm currently working on creating a disabled/enable button style using jQuery. You can check out my demonstration page on Codepen for reference. In the demo, you'll notice a blue submit button. When you input text into the field, the button bec ...

javascriptjquerycss

Disabling Scrolling in AngularJS Material Tab Components

I'm experimenting with AngularJS Material components and struggling with creating tabs. Every time I add a tab, the content inside the child md-content element automatically gets a fixed height with a vertical scrollbar instead of adjusting its heigh ...

javascripthtmlcssangularjs

The problem of border-radius bleeding in Webkit when applying -webkit-transform

After creating a basic jQuery script to slowly rotate an image, I encountered an issue where the rotated image would bleed over the border-radius in Chrome. The rotation works smoothly in Firefox 4.0.1 but not in Chrome. To see the example and code, check ...

csswebkit

Design a unique border for a div element that extends a top-border all the way through the header and a bottom-border that

I am trying to achieve the design displayed in this mockup: https://i.sstatic.net/sYEPu.png Here is my current progress: https://codepen.io/raney24/pen/VOmjBY .header-border { width: 100%; margin-bottom: 10px; border-left: red solid 1px; border ...

htmlcssborder

The updated version of Angular from 13 to 16 has implemented a new default value for primary colors

I recently upgraded my angular (+material-ui) system from version 13 to 16, and encountered an issue with the primary color of my custom theme. It seems that the value is no longer being recognized and defaults to blue. After updating the angular version, ...

cssangularsass

Trying to align a Material UI button to the right within a grid item

I'm attempting to right float the button below using material-ui, but I'm unsure of how to achieve this: <Grid item xs={2}> <Button variant="contained" color="secondary&quo ...

cssreactjsbuttonmaterial-ui

Create precise shapes by tracing images with an SVG generator

Does anyone know of a SVG generator that allows me to trace and save a specific shape from an image as an SVG file? I've come across generators that generate the entire image, but I only want to save a particular shape. For example, if there is an im ...

htmlsvggenerator

Troubles encountered with adapting apexcharts size within a react environment

As a novice front-end coder transitioning from a data analyst background, I am currently facing an issue with integrating an ApexChart visual into a flexbox element. The visual appears fine at a resolution of 2560x1440 pixels. However, upon further resizin ...

javascriptcssreactjsapexcharts

Utilizing the CSS grid framework to efficiently create repetitive rows and columns in code

When I work with CSS frameworks like Bootstrap or Materialize, I often find myself repeatedly typing the same HTML code: <div class="row"> <div class="col s12"> <!-- Some text/ a button / something --> </div> </d ...

htmlcsstwitter-bootstrapframeworksmaterialize

What is the process for updating the background image in Ionic?

Currently facing an issue with setting an image for background in Ionic. The code provided doesn't seem to be working as expected. It appears that the style sheet is not being applied correctly. Not sure where exactly to add the style sheet or how to ...

htmlcssionic-framework

Ways of incorporating text in a parallelogram shape

Here is the HTML code with ID attributes applied to both divs: <div id="herotext"> <div id="banner"></div> <h1 id="maintitle">Hey, I'm Charlie</h1> <p>This websi ...

htmlcss

Having trouble getting transitionProperty to work in the style object of your ReactJS CSS?

In my current setup, I have been utilizing css transitions triggered by property updates to manage animations within my react components and everything has been functioning smoothly up until now. However, I am encountering an issue where I only want to tr ...

cssreactjsjsx

Creating a blur effect on an image tag when hovering using CSS and HTML

I am currently developing a Portal website for one of my classes, and the template provided by my professor utilizes the <picture> tag to adjust images depending on the browser's size. My goal is to add a blur effect and darken the image while d ...

htmlcss

Tips on how to lock the ag-grid to the highlighted row's position and force it to scroll

We have integrated ag-grid into our system, and I am facing an issue with displaying the scrollbar in a child window based on the selected row position in ag-grid. Please refer to the Plunkr link below and click on source_id which will lead you to an edit ...

javascriptjquerycssangularjsag-grid

Angular 6 seems to be having issues loading Bootstrap

I've run into an issue while trying to incorporate Bootstrap into Angular 6. I have already installed Bootstrap using npm install bootstrap and added it to angular.json, but it's still not functioning. Is there something else I should be doing? A ...

javascriptcssangulartwitter-bootstrapbootstrap-4

Dynamic extension of classes in SCSSORExtending classes

When working with Vue, I encountered a situation similar to :style="{ [`--chip-bg-hover`]: hoverColorValue, [`--chip-bg-active`]: activeColor, [`--chip-border-hover`]: borderHoverColorValue, }" Then, i ...

cssvue.jssass