Internet Explorer causes SVG Pie Chart to malfunction

My animated pie chart created with inline SVG code is functioning well on Chrome, Firefox, and Safari browsers. However, it encounters issues in Internet Explorer where the SVG expands vertically and generates a duplicate background element inside the SVG instead of just the circle. I attempted using the preserveAspectRatio attribute but it did not resolve the problem. See snippet below:


          var chart = '<svg viewBox="0 0 32 32"><circle class="circle" r="16" cx="16" cy="16" style="stroke-dasharray: 0 100" /></svg>';
          $('.pie__container--chart').html(chart);
          var chart = $('.pie__container--chart circle');
          
          setTimeout(function () { 
            chart.css('stroke-dasharray', 30 + ' 100');
            $('.pie__container--percent').css('opacity', '1');
          }, 500);
          
          jQuery('button').mouseover(function() {
            num = $(this).attr('data-val');
            $('.pie__container--percent').text(num + '%').addClass('animated');
            setTimeout(function () { 
              $('.pie__container--percent').removeClass('animated');
            }, 500);
            chart.css('stroke-dasharray', num + ' 100');
            $('button').not(this).removeClass('active');
            $(this).addClass('active');
          });
        
      

          /* CSS Code Snippet */
        
      

          /* JavaScript Code Snippet */

jquerycsssvg

Answer №1

If you want Internet Explorer to display it properly, make sure you have the stroke-width: 31.95 set on .pie__container--chart circle.

I've also resolved the issue where the full circle was not being filled when at 100%:

var chart = '<svg viewBox="0 0 32 32"><circle class="circle" r="16" cx="16" cy="16" style="stroke-dasharray: 0 100" /></svg>';
$('.pie__container--chart').html(chart);
var chart = $('.pie__container--chart circle');
    
setTimeout(function () { 
  chart.css('stroke-dasharray',  50 + ' 100');
  $('.pie__container--percent').css('opacity', '1');
}, 500);
  
jQuery('button').mouseover(function() {
  num = $(this).attr('data-val');
  $('.pie__container--percent').text(num + '%').addClass('animated');
  setTimeout(function () { 
    $('.pie__container--percent').removeClass('animated');
  }, 500);
  chart.css('stroke-dasharray', +num/180 + +num + ' 100');
  $('button').not(this).removeClass('active');
  $(this).addClass('active');
});
html, body {
  width: 100%; 
  height: 100%;
  margin: 0;
  padding: 1em;
  font-family: 'Proxima Nova', 'Helvetica', sans-serif;
  letter-spacing: 1px;
  background: #163C4A;
  background: linear-gradient(to bottom right, #316F81, #163C4A) !important;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  font-size: 18px;
  padding: .5em 1em;
  border-radius: 10px;
  background-color: transparent;
  color: #ffffff;
  transition: all .2s ease;
  
}

button.active {
  background-color: #F2AE1C;
  border-color: #F2AE1C;
}

button:hover {
  cursor: pointer;
}

@keyframes fillup {
  from { stroke-dasharray: 0 100; }
}

.pie__container--chart svg {
  width: 100%; 
  height: 100%;
  transform: rotateZ(-90deg);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.pie__container--chart circle {
  fill: rgba(255, 255, 255, 0.1);
  stroke: #F2AE1C;
  stroke-width: 31.95;
  stroke-dasharray: 0 100; 
  transition: stroke-dasharray .5s ease;
}

.pie__container--chart {
  margin-bottom: 2em;
}

.pie__container {
  position: relative;
}

.pie__container--percent {
  position:absolute;
  right:18%;
  top:22%;
  font-size: 32px;
  color: #ffffff;
  font-weight: 600;
  opacity: 0;
  transition: opacity 1s ease;
}

@keyframes animated {
  from {opacity: .25;}
  to {opacity: 1;}
}

.pie__container--percent.animated {
  animation: animated 1s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pie">
  <div class="pie__container">
    <div class="pie__container--chart"></div>
    <div class="pie__container--percent">50%</div>
  </div>
  <button data-val="100">2019</button>
  <button class="active" data-val="50">2018</button>
  <button data-val="75">2017</button>
  <button data-val="25">2016</button>
</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

Action triggered by clicking a button for every individual table column button

Managing my visitor records is made easier with a visitor table that allows me to add and display visitors. Each entry in the table includes a set of sign-in and sign-out buttons placed in two columns. Whenever I click the sign-in button, the current times ...

javascriptjqueryajaxhtmllaravel-5

Ajax continues to operate even if an error is detected

Hello fellow programmers! I'm currently facing an issue with form submission and validation using jQuery with 2 ajax events. The problem lies in the fact that even if the first ajax event (timeconflict.php) returns an error, the second ajax event (res ...

javascriptphpjqueryhtmlajax

Behavior of jQuery resizable when being used on elements can sometimes

A live demonstration showcasing unusual behavior can be found at: If you attempt to resize the window by grabbing the right border and adjusting it horizontally, the vertical alignment goes awry. This issue persists across all open windows accessed throug ...

javascriptjqueryhtmlangularjscss

Words not within the span, away from the span border

I’m currently in the process of creating a dedicated section on my website called "Voices of the Nation,” which draws inspiration from the foundations laid out in the U.S. Constitution. The objective is to highlight individuals who have shown their sup ...

htmlcsslayoutfonts

Unusual ways that backgrounds and borders behave while incorporating CSS transitions for changes in height, positions, and transformations

I was under the impression that I had come up with a brilliant idea... I wanted to create a button with a hover effect where the background would do a wipe transition (top to bottom, left to right) using soft color transitions. My plan was to achieve this ...

csshoverz-indextransparenttransition

Switching Text Box Content When Hovering Over a Static Element: A Fail-proof Method

Even though I followed the solution from another source, the Description I set still refuses to show up in the text box. I have already attempted this: How To Change Text Box Content On Hover I meticulously checked every class name and every bracket in th ...

htmlcsshover

Is there a way to align these images vertically on a smaller device screen?

I am attempting to arrange these images vertically on a smaller screen, displaying them in one column instead of two. https://i.sstatic.net/B0aTJ.png Below is the code I currently have: <div class="container"> <div class="ro ...

cssbootstrap-5

Adjusting the transparency of the background without altering its colors

I need help figuring out how to merge custom palettes I've created such as this one, which resulted in a .css and .less file. While I want to retain the colors, I also require certain elements' backgrounds to be transparent. To achieve this, I c ...

htmlcsstwitter-bootstrap

Trouble with ajax call in Internet Explorer 8

Seeking assistance with a straightforward ajax request triggered by a user altering a select element. Implemented using jquery .ajax, the current functionality (which works in all browsers except Internet Explorer) involves loading a .html file via ajax, ...

jqueryajaxinternet-explorer-8

Align elements evenly across the center while maintaining a controlled distance between each one

In my current scenario, I am working with a flexible number of elements ranging from 2 to 5. My goal is to evenly distribute these elements within a div that also has variable width. This task might seem straightforward, but there's a unique twist inv ...

htmlcss

Vertically and horizontally align an SVG within 2 divs without modifying the parent div of the SVG

Is there a way to center an SVG both vertically and horizontally inside a div? The issue is that the width and height of the SVG are determined using the vx-responsive library, resulting in the following DOM structure: https://i.sstatic.net/3p2wc.png Edi ...

csshtmlsvgflexbox

Embedding a string response containing HTML tags into an iframe

After making an AJAX call to a REST endpoint, I received HTML tags as a string response that I now need to bind to an iframe. The data contains HTML tags such as: var data="<html><head><title>iFrame</title></head><body> ...

jqueryajaxjerseyjersey-client

Is it acceptable to display certain IDs in HTML?

Is it acceptable to structure an HTML page like the following: ... <div id='some_id' lesson_id='313'> ... </div> ... And then in jQuery simply retrieve the lesson_id: lesson_id = $("#some_id").attr("lesson_id") // make A ...

jqueryhtmlajax

The comment received an error due to the undefined method `errors` for nil:NilClass

I have successfully implemented Ajax to create comments on my article show page. Now, I am trying to use Ajax to display errors for the comments as well. However, I am encountering the following error: undefined method `errors' for nil:NilClass Ev ...

jqueryruby-on-railsrubyajax

Utilizing Jquery for deleting text content from a div element

I have a situation where I need to eliminate the text "(2012)" from a particular div using jQuery. Here is the code snippet that I am currently using: var el = $("#myDiv"); //replace(/word to remove/ig, ""); el.html(el.html().replace(/(2012)/ig, "")); ...

jquerycsshtmlreplace

CSS vertical alignment: Getting it just right

I am currently using Bootstrap and below is a snippet of the code I have implemented. <div class="row"> <div class="col-lg-6"><img src="#" alt=""></div> <div class="col-lg-6"> <h2>Heading</h2> ...

htmlcsstwitter-bootstrap

What is the CSS selector for the top-level heading?

Is there a way to target the first occurrence of the highest heading element (h*) in a DOM structure? Perhaps something along the lines of (h1, h2, h3, h4, h5, h6):first-of-ordered-set For example, if the DOM contains h2, h3, h1, h2, h1, it should selec ...

htmlcsscss-selectorshtml-heading

Updating the division of a base template in Django without reloading it after a form submission action

I am looking to implement notifications in my base template, similar to the setup on the top left corner of Stack Overflow. I understand that this can be achieved by creating a custom template tag or a custom context processor. However, my specific requir ...

jqueryajaxdjango

Photo displayed above the carousel using Bootstrap

I'm currently in the process of building a website using the template found at . However, I'm having trouble placing an image in the center of the carousel, above the slides. Here is the code snippet I have tried so far: <div style="positi ...

jqueryhtmlcsstwitter-bootstrap-3

The inclusion of Bootstrap 4 in the header seems to be causing issues with mouse events not functioning correctly

Exploring the functionalities of Bootstrap 4 and jQuery has been an interesting journey. I recently worked on creating a Navbar with 4 links, where the 4th link has a submenu that opens upon hover. However, I encountered an issue where this functionality o ...

javascripthtmlcssbootstrap-4