SVG images are not perfectly aligned with surrounding elements, causing a noticeable discrepancy, which becomes even more pronounced when they are being animated

I've been experimenting with creating animated 3-D bars in a bar graph. To ensure there are no issues with stretching or aspect ratio, I decided to split each bar into three parts: (1) an SVG for the top of the bar, (2) a div with adjustable height for animating the bar upwards, and (3) another SVG for the bottom of the bar.

However, I'm encountering an issue where even though the width values seem correct when inspected (stretched to 100% of the container), they do not align perfectly. This problem becomes more noticeable during animations, as shown in the image below which highlights the three components of each bar. You can also view a demonstration of this issue in a CodeSandbox example.

This alignment issue is present in Chrome, mobile Chrome, and mobile Safari, although interestingly it's not always visible on Safari. What could be causing this lack of seamlessness? Could it be related to my usage of SVGs, dimensions, or perhaps some floating-point error with percentages?

https://i.sstatic.net/3zXqp.png

cssreactjssvgcss-animationsstyled-components

Answer №1

In my opinion, attempting to stack three divs may not be the most effective approach, but it should still function adequately.

To enhance the display of the top section, you could make some adjustments to bar-skew-top.svg:

<svg width="150" height="50" viewBox="0 0 150 50" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g stroke="none" stroke-width="0" fill-rule="evenodd">
    <rect id="bar-skew-top-bar" x="0" y="25" width="150" height="25"/>
    <path id="bar-skew-top-cap" d="M75 50L0 25 75 0l75 25-75 25z"/>
  </g>
</svg>

If I were in your position, I would opt for a single SVG and animate its elements instead.

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

Encountered an error while configuring AWS Amplify using Amplify.configure(awsconfig)

I've encountered an issue while using the amplify cli in conjunction with my NextJs app. It seems like there might be a misconfiguration as I'm receiving the following error when attempting to query data: [WARN] 32:17.454 DataStore - Data won&ap ...

reactjsnext.jsdatastoreaws-amplify

Add a CSS and jQuery hover effect to display text over an image, requiring users to click twice on their mobile device

I have a bunch of panels for different categories that change the background image when hovered over, display some introductory text, and lead to a URL when clicked. However, on mobile devices, you need to tap the panel twice to activate the URL. What I&a ...

javascriptjqueryhtmlioscss

An element that stands alone, not contained within another element

When working with the following HTML structure: <div> <span class="style-me">i want to be styled</span> </div> <div class="ignore-my-descendants"> <span class="style-me">i want to be styled but my parent prevent ...

csscss-selectors

Late data is being received in the Redux state of my React application

I am currently retrieving data from two APIs to fetch song lyrics and artist biographies. I need to store this data in my reducer, but I am facing an issue. When I make the second API call to get the biography, the data gets saved in my store successfully, ...

javascriptreactjsredux

Building a Slider component in a React class using Materialize CSS

I currently have a functioning slider implemented in a React function component. I am now looking to correctly integrate the slider below into a React class component. import * as React from 'react'; import Box from '@mui/material/Box'; ...

javascriptreactjsmaterial-ui

What is the best way to display a string state value in a React component?

I need assistance with displaying a state value that is in string format. Despite my efforts, I have not been successful in finding a solution and am feeling quite frustrated. Can anyone provide some guidance? ...

javascriptreactjsreduxreact-redux

Ensure that you call setState prior to invoking any other functions

Is there a way to ensure that the setSearchedMovie function completes before executing the fetchSearchedMovie(searchedMovie) function? const { updateMovies, searchedMovie, setSearchedMovie } = useContext(MoviesContext); const fetchMoviesList = (ev ...

javascriptreactjstypescriptstate

Uninstalling ESLint from Your React Project

I set up ESLint for my project by running eslint --init, but now I want to remove it because it's generating unnecessary errors throughout the project. Could someone please guide me on how to uninstall ESLint from my project? ...

reactjseslint

Position the button to the right using the Bootstrap float-right class

Currently, I am utilizing reactstrap within my React component. My primary intention is to position a button to the right side of the container but unfortunately, the following code doesn't achieve the desired result: <td class="col-md-4 clearfix" ...

cssbootstrap-4

The AudioPlayer refuses to play following a track change

I am looking to implement an audio player in React Nextjs that features interactive dots, each representing an audio track. The functionality I want is such that clicking on a dot will pause the currently playing track (if any) and start playing the select ...

javascriptreactjsreact-hooksnext.jsaudio-player

The attempt to connect with react-native-fetch-blob has not been successful

How do I resolve the issue of displaying a PDF from my assets folder in an Expo, React Native project using react-native-pdf? While scanning folders for symlinks, encountered an error with RNFetchBlob library in my project directory. The automatic linki ...

javascriptandroidreactjspdfreact-native

Welcome to Digital Ocean! It appears you are attempting to utilize TypeScript

Over the past 48 hours, I've been struggling to build my project on a DO App. Strangely enough, there were no changes made to the project, yet out of nowhere it started breaking with an unexpected error message: [2023-04-06 09:03:02] │ It seems like ...

reactjstypescriptnext.jsdigital-ocean

Exploring the use of global variables in React

Welcome to my React learning journey! I've encountered an issue while trying to access a global variable exposed by a browser extension that I'm using. Initially, I attempted to check for the availability of the variable in the componentDidMount ...

javascriptreactjstypescript

Oops! You forgot to include the necessary getStaticPaths function for dynamic SSG pages on '/blogs/[post]'

Whenever I attempt to execute npm run build, an error occurs. The following build error occurred: Error: getStaticPaths is required for dynamic SSG pages and is missing for '/blogs/[post]'. This is the code snippet causing the issue: function ...

javascriptnode.jsreactjsnext.jsssg

Reviewed and verified one package in 513 milliseconds with no vulnerabilities detected

After deleting my node_modules folder, as well as package.json and package-lock.json, I tried running npm install. Surprisingly, the response was: "up to date, audited 1 package in 513ms found 0 vulnerabilities", but no new node_modules were inst ...

node.jsreactjsnpmnode-modules

Exploring Safari Mobile's object-position feature

I'm inquiring about an issue with Safari Mobile and the CSS object-position/object-fit property. I attempted to use it, but unfortunately, it's not working for me. I've come across conflicting answers regarding Safari Mobile's support ...

htmlcsssafarimobile-safari

Utilize jQuery to set a cookie, then apply the bodyclass retrieved from the cookie upon page

I have a button that changes the body class to .blackout For this, I am utilizing js-cookie library to manage cookies. The code snippet associated with my button is shown below: <script> $('#boToggle').on('click', function(e) { ...

javascriptjquerycsscookiesdocument-body

Ways to merge multiple cells horizontally in a table right from the beginning

Is there a way to start the colspan from the second column (Name)? See image below for reference: https://i.stack.imgur.com/RvX92.png <table width="100%"> <thead style="background-color: lightgray;"> <tr> <td style="width ...

javascripthtmlcssangularjs

Learn how to render a single element with multiple child elements within separate `<td>` tags in a table row using React

I'm just starting out with React and I have a code snippet that I'm using to render an HTML table in a component. Is there a more optimized way to achieve this? bodyItems = sorted.map((data) => [ data.employerName, data.sectors.map((sector ...

reactjstypescript

The npm error encountered was: "Unable to retrieve issuer certificate locally."

In my quest to create a React application, I have explored various methods. Initially, I experimented with Maven and now I am delving into the world of create-react-app from Facebook Incubators. Executing the command create-react-app my-app in npm environ ...

node.jsreactjsnpmcreate-react-app