Is there a way to rotate a smaller SVG path within a larger rectangle around its own center?
The current code rotates the entire space.
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 10 5"
to="360 10 5"
dur="1s"
repeatCount="indefinite"/>
In the rotate transform, the second and third values represent the X and Y coordinates of the center of rotation.
The issue you were facing was that you specified (10, 5) which is far from the actual center of your gear. The correct values should be (97.5, 177.5).
See the updated code snippet below:
*{
background-color: lime;
}<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 161 231"><defs><style>.cls-1{fill:#fff;}</style></defs><rect class="cls-1" x="3.5" y="3.5" width="154" height="224" rx="8.5" ry="8.5"/>
<path d="M149,7a5,5,0,0,1,5,5V219a5,5,0,0,1-5,5H12a5,5,0,0,1-5-5V12a5,5,0,0,1,5-5H149m0-7H12A12,12,0,0,0,0,12V219a12,12,0,0,0,12,12H149a12,12,0,0,0,12-12V12A12,12,0,0,0,149,0Z"/>
<path d="M134.46,179.67h-2.81a1.08,1.08,0,0,1-.76-1.84l2-2a1.55,1.55,0,0,0,0-2.18l-2.53-2.53a1.58,1.58,0,0,0-2.18,0l-2,2a1,1,0,0,1-.75.32,1.12,1.12,0,0,1-.76-.3,1,1,0,0,1-.33-.78v-2.81a1.55,1.55,0,0,0-1.54-1.54h-3.58a1.55,1.55,0,0,0-1.54,1.54v2.81a1.07,1.07,0,0,1-1.09,1.08,1,1,0,0,1-.75-.32l-2-2a1.58,1.58,0,0,0-2.18,0l-2.53,2.53a1.55,1.55,0,0,0,0,2.18l2,2a1.08,1.08,0,0,1-.76,1.84h-2.81a1.55,1.55,0,0...
To ensure that your animation is centered, you can utilize the transform-origin property in the CSS of your path element.
path {
transform-origin: 50% 50%;
}
To make it spin, adjust the animateTransform attribute like so:
<animateTransform attributeType="xml"
attributeName="transform"
type="rotate"
from="0 0 0"
to="360 0 0"
dur="1s"
repeatCount="indefinite"/>
Lastly, position your small gear's path at the center of the big gear.
Inconsistencies between Chrome and Firefox have been noticed in the following example. While the footer height is set to height:40px and appears fine in Chrome, it seems smaller in Firefox, around 35px. Any specific reasons for this difference? Link to t ...
Looking to add animation to a title that consists of two parts: "HARD" and "WARE", with the second part having a more transparent color. When hovering over the "HARD" word, the colors reverse correctly. However, when hovering over the "WARE" word, only on ...
Although I have searched for similar issues on StackOverflow, none of the solutions seem to work for me. The errors I am encountering are unique and so are the fixes required, hence I decided to create a new post. The company conducting my test provided m ...
To display levels using star icons from angular material, I wanted the stars to be shown next to each other. I attempted to achieve this by applying letter-spacing: -0.25rem;, but unfortunately it did not render correctly on iOS platforms (resulting in s ...
I've recently created a webpage with some Java source code, neatly organized within blocks. However, I'm looking to enhance its appearance so it truly looks like Java code. Take a look at my page's code here for reference: Are there any onl ...
My goal is to have sidebar elements align with specific id tags in the main content, rather than just stacking up one after another. I want the sidebar elements to align with certain id tags mentioned in the main post content. The image at shows the basic ...
If I have a simple code snippet like the following: <ListItem button={true} > <Typography variant='caption' color='primary'> {value} </Typography> <Button onClick={foo} > Button ...
I'm currently working on an app that allows users to select a color scheme from a dropdown form. The hexidecimal values associated with the selected color scheme successfully populate specific text fields as intended. However, I am facing difficulty i ...
Currently, I am working on creating a basic website on a subdomain. Everything appears to be running smoothly in Google Chrome except for one issue with the header image not displaying in IE8. The image link is . It seems that the problem may stem from IE ...
Currently revamping a website and encountered an unusual issue with select boxes. There seems to be an overlapping white space where the option values should be. Here's a visual reference: View Image of Select Box Issue Utilizing Bootstrap for the re ...
Are you experiencing the issue of blank orders being generated in WooCommerce with no details and a pending payment status? I am utilizing the WooCommerce plugin along with the Elavon payment gateway, and although everything seems to be set up correctly, t ...
Trying to change the color of an svg icon displayed using Angular Material on hover has been a challenge for me. Here's my code snippet: <mat-icon svgIcon="menu"></mat-icon> The icon is visible, but when I attempt to add a class for chan ...
My website is currently in the development stage and functions well on all browsers except for IE10. Interestingly, both the menu bar and photo gallery, which rely on Jquery, are not functioning properly in IE10. Below is the code snippet: <script ty ...
I am trying to style external links by adding a pseudo :after element right after the link itself, but I'm having trouble getting it to work on the same line. Here is the CSS code I have: a:not([href*="domain"])::after { content: url(data:image/svg+ ...
In my current project, I am creating a vue-component based on vue-select. Within this component, I have added a custom info Icon. The issue I am facing is that when the user clicks on the Icon, instead of triggering my custom method getInfo, it opens the s ...
Just starting out with React and I've noticed something strange. When I view my website on a PC, everything looks normal. However, when I switch to the desktop site on my phone, things appear differently. It seems like moving an element by 20px on mob ...
1) I'm working with Material UI in React JS. I have added a simple scrollable code, but when I reach the bottom of the screen/scroll, it freezes. 2) I also tried it with a simple HTML page and it worked correctly. <div style={{ ...
I am trying to create a div that changes color based on the complementary color of whatever is underneath the mouse pointer. I want it to follow the mouse and dynamically adjust its color. This functionality is similar to what Gpick does: https://www.you ...
I am working on a slider and my approach is to create a div and insert 4 images inside it. The images will be stacked one above the other using position: absolute, with a width of 1013px, max-width of 100%, and height set to auto for responsiveness. The is ...
I am currently developing a mobile application that utilizes the jQuery UI select menu. The functionality works well, but I have encountered an issue with certain drop downs being too long to display properly. While my PC shows scrollable floating divs as ...