Skip to content

Instantly share code, notes, and snippets.

@bill-barron
Last active February 11, 2016 04:35
Show Gist options
  • Save bill-barron/7ca69900b09e1ca735b4 to your computer and use it in GitHub Desktop.
Save bill-barron/7ca69900b09e1ca735b4 to your computer and use it in GitHub Desktop.
IE9 - IE11 doesn't honor percent-based widths on the SVG element. To get around this, you need to nest SVG within two div elements and use the styles shown below. To control the width of the graphic, just adjust the width of the '.outer' element to suit you needs using whatever width units you like.
<style>
.inner { position: relative; padding-top: 100%; }
.inner svg {width: 100%; height: 100%; position: absolute; margin-top: -100%; left: 0; right: 0;}
</style>
<div class="outer" style="width: 50%;"><!-- This makes the graphic take up 50% of the page or whatever container '.outer' is in. -->
<div class="inner">
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
<g>
<path fill="rgb(175, 216, 248)" stroke="rgb(0, 0, 0)" stroke-width="1" d="M200,40 A160,160 0 0 1 313.1370849898476,313.1370849898476 A160,160 0 0 1 40,200.00000000000003 L200,200 Z">
<title>Blueberries</title>
</path>
<text x="256.5685424949238" y="256.5685424949238" fill="rgb(0, 0, 0)" stroke="rgba(255, 255, 255, .5)" stroke-width="0.1" text-anchor="middle" font-size="25">75%</text>
</g>
</svg>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment