Adjust the proportion of an SVG element using scaling properties

I am experimenting with creating an SVG animation. In the demo, I noticed that when I adjust the charge fill of the SVG, it gets pushed to the left edge of the container.

Is there a way to maintain the x,y attributes of the path in the SVG? Or have I unintentionally made my SVG difficult to animate properly?

.svg {
  width: 40%;
}

#charge {
  /* animation: charge 1s ease infinite; */
  transform: scaleX(0.1);
}

@keyframes charge {
  0% {
    transform: scaleX(0.1);
  }
  100% {
    transform: scale(1);
  }
}
<div class="svg">
  <svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
                <polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
                <rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/>
              </svg>
</div>

csssvg

Answer №1

To prevent the need for setting specific pixel values on the transform-origin, an alternative approach is to adjust the transform-box so that the transform-origin is relative to the element rather than the entire SVG:

.svg {
  width: 40%;
}

#charge {
  transform-origin: left;
  transform-box: fill-box;
  animation: charge 1s ease infinite;
  transform: scaleX(0.1);
}

@keyframes charge {
  0% {
    transform: scaleX(0.1);
  }
  100% {
    transform: scale(1);
  }
}
<div class="svg">
  <svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
     <polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
     <rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/>
   </svg>
</div>

Answer №2

If you want to manipulate the position of transforming elements, you can utilize the transform-origin property. By default, this property sets the values to 50%, 50%, which places the transforms at the center of the element.

.svg {
  width: 40%;
}

#charge {
  transform-origin: 10px;
  animation: charge 1s ease infinite;
  transform: scaleX(0.1);
}

@keyframes charge {
  0% {
    transform: scaleX(0.1);
  }
  100% {
    transform: scale(1);
  }
}
<div class="svg">
  <svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
     <polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
     <rect id="charge" width="180" height="80" x="10" y="10" fill="#0071BC"/>
   </svg>
</div>

Answer №3

To create the desired effect, you can animate the width property like this:

.svg {
  width: 40%;
}

#charge {
  width: 10px;
  height: 80px;
  animation: charge 1s ease infinite;
}

@keyframes charge {
  0% {
    width: 0;
  }
  100% {
    width: 180px;
  }
}
<div class="svg">
  <svg xmlns="http://www.w3.org/2000/svg" id="battery_1_" x="0px" y="0px" viewBox="0 0 214 100">
   <polygon id="outline" points="214,22.5 200,22.5 200,0 0,0 0,100 200,100 200,77.5 214,77.5"/>
   <rect id="charge" x="10" y="10" fill="#0071BC"/>
  </svg>
</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

Modify the buttons in the Angular Material Nav-bar according to the current page

I've utilized Angular Material to design my navbar in the app.component.html page. Initially, it features a LOGIN button which should be hidden once the user successfully logs in. Current method: I'm currently disabling the login button based on ...

htmlcssangularjsangularangular-material

CSS3 Rounded Corners

What is the most effective method to create this style of border using only CSS3? PS: The width should be 100%, matching the size of the screen. ...

htmlcssbordercss-shapes

Attempting to link two JavaScript files, however, only one of them is functioning correctly

I'm currently experiencing an issue with my HTML page that involves calling two JS files for two different image sliders on the same website page. One slider works perfectly fine while the other does not. I'm confused as to whether it's perm ...

javascripthtmlcss

What steps can I take to avoid my Bootstrap Alert overlapping items in my Nav bar when displayed?

Here is the code from my _notices.html.erb file: <% flash.each do |msg_type, message| %> <div class="row pt-6 alert-messages"> <div class="col-lg-6 offset-lg-3"> <div id="inner-message" class=" ...

cssbootstrap-4

What is the best way to adjust the autoplay volume to a set level?

I have a page with an audio element that autoplays, but I want to ensure the volume is set to a specific level in case a user has their volume turned up to 100%. Any suggestions on how to accomplish this? Here's the HTML code: <audio autoplay> ...

javascriptjqueryhtmlcss

Background image in Bootstrap not covering entire web page

I am facing an issue where the background image is confined within the constraints of the login panel, and I'm unsure why. My goal is for the image to span the full width and height of the browser window. Any assistance on this matter would be greatly ...

htmlcssimagetwitter-bootstrapbackground

Double-up with Bootstrap's dual-column tabs

Looking to customize the layout of a nav-tabs ul to display its contents in 2 columns instead of horizontally, as per the default Bootstrap style for nav-tabs. Attempted to use the CSS property column-count: 2 but it didn't yield the desired result. ...

csstwitter-bootstrap

Adaptive Style Sheets Strategy

The images below depict the concept I am trying to achieve. The first image shows a longer width while the second one represents a shorter width. The red blocks are positioned on the right and left sides, with the yellow block adjusting its width based on ...

css

Incorporating Google Maps into a unique custom shape div

Looking to create a unique shaped div that will house a Google Maps map. I have the custom border covered with a .png, but creating the actual shape is where I'm stuck. I believe using HTML canvas may be the solution, along with CSS overflow:hidden to ...

javascriptjqueryhtmlcss

Unable to apply inset box-shadow to image

I've added a box-shadow to my image. box-shadow: 0 0 10px RED inset However, the shadow is not showing up on the image. When I use Firebug to change the image path, I can see that the shadow is behind the image. How can I apply the shadow directly ...

htmltwitter-bootstrapcss

How to adjust the size of a div based on its child content, including margins

I have encountered an issue with animating the height of a configurable content div, which typically contains paragraphs of text. Shown below is my animation (slowly paced), starting from a height of 0 and expanding to its calculated height based on its c ...

htmlcss

Trouble with CSS3 Menu Layout and Gradient Display Issues

My task is to replicate this menu: I'm having trouble creating the gradient. Completed Why can't I see it in my code? http://jsfiddle.net/Vtr6d/ Here's what I currently have: CSS: .mainOptions{ float:left; margin:0 20px 0 20px; ...

htmlcssgradient

Tips for Utilizing Border-Radius in Safari

What is the best way to hide a child element's corners within its parent (#div1) Ensuring that the child does not overflow its parent container? ...

csssafari

What is the best way to center align my webpage horizontally for both mobile and desktop display?

I am having an issue with the alignment of the section on my website. How can I center align it horizontally for both mobile and desktop views? I attempted to use the center-align block elements by setting the left and right margins to auto, but that did n ...

htmlcssalignmentstylingcentering

Implement a vertical background sprite animation using jQuery along with a mask

Is it possible to create a jQuery background vertical animation that smoothly transitions the sprite position, giving the appearance of fading into the next position? Currently, my code (view demo jsfiddle link below) moves the sprite to the correct backgr ...

jquerycssjquery-animatespritecss-sprites

Ways to align text within a table cell on a background using CSS

I'm attempting to print jukebox strips with designated corner markings. The code I have written generates the HTML page for displaying the strips, allowing users to then print them. Jukeboxes typically feature selection buttons labeled ABCDEFGHJK and ...

htmlcss

Discovering visible ID numbers on the screen

My content includes the following: <div id="sContainer"> <div class="message0" id="l0">Initial Content 111</div> <div class="message1" id="l1">Initial Content 222</div> <div class="message2" id="l2">Initial ...

javascriptjqueryhtmlcss

Adjusting the z-index of the tinyMCE toolbar

I have been utilizing the tinyMCE editor plugin, which transforms textareas into iframes and displays a toolbar at the top of the content. It has been functioning flawlessly. However, there are times when there are videos placed above the content. In such ...

jquerycsstinymce

Troubleshooting Cufon Compatibility with Internet Explorer - Investigating a CSS Problem

Currently facing an unusual issue. I am creating a Wordpress theme with Cufon and it works flawlessly in Chrome and Firefox, but refuses to render in IE. I decided to put this problem on hold and focus on it later as I am still in the development phase. Y ...

cssinternet-explorercufon

Is the append() function malfunctioning in jQuery?

Why is it copying two lines when I only want one line to be cloned on button click? Is there a way to make sure that only a single line is copied each time the button is clicked? Here is my code: $(function() { $('.add-more-room-btn').clic ...

javascripthtmljquerycss