Make SVG graphics responsive with CSS. Useful for scale down d3 charts on mobile devices.
A Pen by Riccardo Scalco on CodePen.
<div id="box"> | |
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> |
Make SVG graphics responsive with CSS. Useful for scale down d3 charts on mobile devices.
A Pen by Riccardo Scalco on CodePen.
var w = 100, | |
h = 100; | |
// https://css-tricks.com/scale-svg/ | |
// padding-bottom Hack on an Inline <svg> Element | |
var svg = d3.select("#box") | |
.append("svg") | |
.attr("viewBox", "0 0 " + w + " " + h) | |
.attr("preserveAspectRatio", "xMidYMin slice") | |
.attr("width", "100%") | |
.style({ | |
"padding-bottom": (100 * h / w) + "%", | |
"height": "1px", | |
"overflow": "visible" | |
}); | |
svg.append("circle") | |
.attr("cx", w / 2) | |
.attr("cy", h / 2) | |
.attr("r", w / 2) | |
.style("fill", "limegreen"); | |
#box { | |
max-width: 600px; | |
} |