Miguel Pimentel
Reputation: 13
SVG takes up too much space
http://codepen.io/anon/pen/NPyxMg
My SVG has a huge spacing in all directions around it. I want the space to the right and left but top and bottom are too much. How do I get it to behave? The style sheet is in the codepen.
<html>
<head>
<title>Empowering PA Youth</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="empower.css">
</head>
<body>
<div id="container">
<div id="empowering">
<script language="javascript">
function toggle() {
var text1 = document.getElementById("refresh");
var text2 = document.getElementById("revive");
var text3 = document.getElementById("renew");
var ele1 = document.getElementById("g3829");
if (text1.style.display == "block") {
text1.style.display = "none";
text2.style.display = "none";
text3.style.display = "none";
}
else {
text1.style.display = "block";
text2.style.display = "none";
text3.style.display = "none";
}
}
function toggle2() {
var text1 = document.getElementById("refresh");
var text2 = document.getElementById("revive");
var text3 = document.getElementById("renew");
var ele2 = document.getElementById("g3838");
if (text2.style.display == "block") {
text1.style.display = "none";
text2.style.display = "none";
text3.style.display = "none";
}
else {
text2.style.display = "block";
text1.style.display = "none";
text3.style.display = "none";
}
}
function toggle3() {
var text1 = document.getElementById("refresh");
var text2 = document.getElementById("revive");
var text3 = document.getElementById("renew");
var ele3 = document.getElementById("g3846");
if (text3.style.display == "block") {
text1.style.display = "none";
text2.style.display = "none";
text3.style.display = "none";
}
else {
text1.style.display = "none";
text2.style.display = "none";
text3.style.display = "block";
}
}
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Layer_1"
viewBox="0 0 600 400"
PreserveAspectRatio="xMinYMin meet"
>
<path
style="fill:#c9cdd3"
id="path3646"
d="m 300.019,198.427 c -0.021,0.021 0.005,0.037 0.052,0.053 -0.014,-0.049 -0.03,-0.076 -0.052,-0.053 z" /><path
style="opacity:0.6;fill:#c9cdd3"
id="path3648"
d="m 425.283,215.57 1.148,0.025 0,-1.412 -1.148,0.041 0.019,-1.127 -1.083,-0.021 0,-2.848 -0.682,-0.052 -0.055,-0.786 -1.808,-0.42 0.068,-0.782 1.007,0.021 0.025,-0.524 0.682,-0.236 0.157,-0.656 0.63,-0.184 -0.498,-4.826 c 0,0 2.309,-2.702 2.229,-2.702 -0.08,0 -1.392,-1.677 -1.392,-1.677 l -1.285,1.049 -1.415,-2.746 -1.259,0 -0.908,-1.216 0.735,-0.812 0.078,-1.234 1.337,-0.183 -1.23,-0.366 1.23,-0.735 -1.6,-0.053 0.918,-1.075 -1.495,0.761 -0.13,-1.364 -0.63,1.285 -0.42,-0.026 -0.891,-0.734 0.444,1.285 -0.945,-0.131 0,-0.954 -0.224,-0.122 -0.091,-3.486 -0.589,-0.824 0.013,-0.173 1.075,-0.026 0,-0.97 -0.262,-0.343 -0.788,-0.051 -0.078,-0.285 0.866,-0.108 0,-0.786 -0.289,-0.457 -0.025,-0.384 -0.315,-0.366 0.45,-0.943 0,-0.684 -1.814,2.377 0,0.981 0.314,0.37 0.079,0.233 -0.315,0 -0.314,0.419 0,1.049 0.473,0.262 0.003,1.212 0.603,0 0,1.222 -0.972,4.427 0,1.759 0.555,0.464 0,1.944 0.471,1.008 -0.471,2.604 0,1.02 0.535,0 0.092,0.487 -0.069,2.105 0.417,0 0.016,2.32 -0.433,1.66 0,4.861 -0.904,-0.02 0,1.287 -1.271,-0.014 0.281,1.555 1.073,-0.008 -1.213,2.27 c 0,0 -0.565,-4.1 -5.23,-6.645 -0.429,-0.232 -0.852,-0.426 -1.27,-0.602 -2.126,-2.615 -6.149,-2.131 -6.149,-2.131 l 0,-2.094 -0.844,0.26 c -0.249,-0.891 -0.706,-1.365 -1.111,-1.619 l 0,-14.644 -5.249,0 0,10.794 -0.36,0 0,4.531 -0.204,0.203 -1.417,0 0,-41.742 -6.655,-0.082 0,33.616 c -0.657,0.089 -1.244,0.311 -1.727,0.562 l 0,-30.563 -4.889,-4.889 -5.875,4.812 0.075,26.259 c -0.882,-0.108 -1.658,0.018 -2.318,0.259 l 0,-49.52 -3.285,-0.04 -0.057,-0.68 2.564,0.021 0.777,-0.361 0,-0.565 -0.624,-0.51 -2.773,-0.055 -0.453,-19.192 -0.48,19.196 -2.916,0 -0.624,0.447 0.058,0.679 0.679,0.341 2.804,0 0,0.545 -3.774,0 0,47.603 -1.395,-1.193 -2.261,2.544 0,3.109 -0.707,0 0,7.351 -0.707,0 0,3.295 -1.514,0 0,-17.146 -1.598,0 0,-5.257 -3.069,0 0,5.257 -0.398,0 0,4.726 -4.792,0 0,0.781 c -0.65,-0.009 -1.067,-0.016 -1.067,-0.016 l 0,0.264 -0.42,0 0,-3.476 -0.871,0 0,-1.638 -6.058,0 0,8.025 -2.211,0 0,6.457 -1.102,0 0,-1.171 -1.872,0 0,-0.77 -0.88,0 0,-1.102 -1.103,0 0,3.042 -0.749,0 0,-5.655 -1.556,-9.469 -1.556,9.469 0,5.373 -0.534,0.133 0,-17.007 -8.102,0 0,3.431 -1.16,0 0,6.874 -0.358,0 -0.588,-2.781 -0.754,2.781 -2.046,0 c 0,-2.781 0,-6.323 0,-6.323 l -1.541,0 0,1.321 -4.405,0 0,-0.991 -2.092,0 0,1.432 -1.544,0 0,-1.102 -1.65,0 0,5.729 c -0.81,0.033 -1.715,0.051 -1.939,-0.014 0.127,0.438 -0.052,3.485 -0.052,3.485 l -1.22,0 0,3.738 -0.991,0 0,-5.938 -1.13,-2.119 -1.132,2.543 0,4.241 -0.837,0 0,-15.6 -5.821,0 0,2.501 -0.646,0 0,5.365 -2.091,0 0,-7.566 -3.712,0 0,-6.083 -4.72,0 0,3 -4.564,0 0,11.882 -0.436,0 0,4.876 -0.428,0.428 0,-37.29 -0.865,0 0,-6.137 -0.865,0 0,-2.594 -0.865,0 0,-1.024 -0.944,0 0,-1.416 -0.787,0.158 0,-0.707 -0.471,-0.079 c 0,0 -0.044,-5.979 0,-7.079 0.048,-1.233 -1.245,-1.351 -1.245,-1.351 l 0,-3.133 -0.394,0 0,3.106 c -1.515,0.056 -1.588,1.22 -1.588,1.22 l 0,7.864 -1.179,0 0,1.259 -0.943,0 0,1.259 -0.944,0.08 0,2.201 -0.707,0.078 0,6.214 -0.474,0 0,31.276 -0.727,0.58 0,0.635 c -0.043,0 -0.073,-0.002 -0.073,-0.002 l 0,1.792 -1.021,0 0,-17.621 -4.821,0 0,18.942 -0.208,0 -2.262,-2.262 0,-13.376 0,-1.982 -1.432,0 0,-1.322 -3.768,0 0,-8.898 -3.343,0 0,18.367 -3.121,0 0,-15.518 -4.054,0 0,23.67 -1.022,0 0,-1.432 -1.663,0.079 0,-1.994 -0.1,0 0,-1.279 -1.541,0 0,-1.102 -0.494,0 0,-10.492 -5.588,0 0,9.611 -1.096,0 0,-9.611 -5.016,0 0,7.959 -1.574,0 0,3.267 -0.564,-0.331 -0.707,0.827 0,1.292 -0.706,0.142 0,7.058 -1.11,0 0,-22.362 -0.478,-0.478 0,-2.457 -0.957,-0.958 0,-5.628 -1.345,-1.292 0,-1.757 -0.206,-0.259 0,-1.447 -0.361,-0.31 0,-1.86 -0.518,-0.102 0,-1.861 -0.205,-0.154 0,-1.189 -0.312,-0.259 0,-1.084 -0.412,-0.879 -0.013,-8.377 0,0.155 -0.195,8.222 -0.259,0 0,1.551 -0.749,1.602 0,1.37 -0.8,0.799 0,1.758 -0.529,0 0,1.898 -0.375,0.376 0,1.524 -0.285,0.283 0,1.602 -0.305,0 0,5.491 -0.766,0 0,1.405 -0.894,0 0,23.698 -1.083,0 0,-1.273 -0.624,0 0,-11.73 -10.114,0 0,14.863 c -0.79,0.049 -1.561,0.044 -1.561,-0.164 0,0.102 0,1.025 0,2.229 l -0.439,0.439 0,-7.378 -2.863,0 0,7.679 -1.433,0 0,-9.552 -6.718,0 0,13.058 -1.708,0 0,-6.725 -6.627,0 0,4.757 0,12.763 258.243,-0.166 c 0.055,-5.089 -3.833,-6.386 -3.833,-6.386 z" /></g></g><a
id="a3853"
class="blueleaf"
xlink:href="http://www.harmonyheartcamp.org"><path
d="m 219.686,191.798 c 0,0 13.039,-3.188 24.201,-1.241 11.163,1.947 35.141,-1.469 34.718,-22.108 0,0 3.104,-1.351 5.837,-0.694 -3.862,-1.792 -23.657,-7.482 -37.504,4.148 0,0 6.014,-12.095 30.06,-8.237 0,0 -10.173,-12.876 -25.449,-7.801 -15.278,5.075 -21.789,29.058 -31.863,35.933 z"
id="blue"
style="fill:#0088c3" /></a><a
id="a3856"
xlink:href="http://www.campcomanche.org"><path
d="m 254.149,107.082 c 0,0 5.698,12.154 5.99,23.48 0.294,11.327 8.377,34.159 28.525,29.674 0,0 1.938,2.776 1.834,5.584 0.992,-4.141 2.667,-24.668 -11.467,-35.948 0,0 13.041,3.509 14.005,27.844 0,0 10.616,-12.515 2.626,-26.488 -7.99,-13.974 -32.785,-15.626 -41.513,-24.146 z"
id="green"
style="fill:#97c25f" /></a><a
id="a3870"
xlink:href="http://www.stpaulshouse.org"><path
d="m 380.314,191.798 c 0,0 -13.039,-3.188 -24.201,-1.241 -11.163,1.947 -35.141,-1.469 -34.718,-22.108 0,0 -3.104,-1.351 -5.837,-0.694 3.862,-1.792 23.657,-7.482 37.504,4.148 0,0 -6.014,-12.095 -30.059,-8.237 0,0 10.173,-12.876 25.448,-7.801 15.278,5.075 21.79,29.058 31.863,35.933 z"
id="orange"
style="fill:#f08c3c" /></a><a
id="a3859"
xlink:href="http://www.campcomanche.org"><path
d="m 345.851,107.082 c 0,0 -5.698,12.154 -5.99,23.48 -0.294,11.327 -8.377,34.159 -28.524,29.674 0,0 -1.938,2.776 -1.835,5.584 -0.993,-4.141 -2.667,-24.668 11.467,-35.948 0,0 -13.041,3.509 -14.005,27.844 0,0 -10.615,-12.515 -2.626,-26.488 7.991,-13.974 32.785,-15.626 41.513,-24.146 z"
id="yellow"
style="fill:#fde33b" /></a><path
d="m 287.124,222.00999 28.294,0 c 0,0 -17.034,-11.39802 -7.268,-53.01 0,0 -1.939,3.14001 -2.814,2.74864 -2.627,-1.4035 -0.908,-12.81963 -0.908,-12.81963 0,0 -2.464,9.55788 -5.025,9.88486 -2.562,0.32497 -5.253,-9.81846 -5.253,-9.81846 0,0 2.756,14.80868 -0.128,14.64468 -1.381,-0.0533 -2.271,-0.64993 -2.271,-0.64993 0,0 12.98,23.57174 -4.627,49.01984 z"
id="path3664"
style="fill:#846541" /><g
id="g3666"><g
id="g3668"><path
id="path3670"
d="m 169.602,228.112 22.285,0 0,7.603 -14.57,0 0,7.383 14.57,0 0,7.465 -14.57,0 0,10.74 14.57,0 0,7.631 -22.285,0 0,-40.822 z" /><path
id="path3672"
d="m 201.953,228.112 7.57,0 9.463,28.472 9.549,-28.472 7.566,0 6.848,40.821 -7.514,0 -4.377,-25.781 -8.674,25.781 -6.848,0 -8.596,-25.781 -4.48,25.781 -7.576,0 7.069,-40.821 z" /><path
id="path3674"
d="m 247.973,228.112 8.242,0 c 4.459,0 7.674,0.411 9.643,1.235 1.971,0.822 3.525,2.154 4.662,3.996 1.139,1.84 1.707,4.047 1.707,6.618 0,2.85 -0.744,5.217 -2.234,7.104 -1.488,1.887 -3.51,3.199 -6.062,3.939 -1.498,0.426 -4.229,0.64 -8.188,0.64 l 0,17.288 -7.77,0 0,-40.82 z m 7.769,15.956 2.471,0 c 1.943,0 3.293,-0.139 4.051,-0.418 0.76,-0.277 1.355,-0.736 1.791,-1.377 0.434,-0.641 0.652,-1.416 0.652,-2.326 0,-1.576 -0.611,-2.729 -1.832,-3.451 -0.889,-0.539 -2.535,-0.809 -4.939,-0.809 l -2.193,0 0,8.381 z" /><path
id="path3676"
d="m 297.969,227.086 c 5.775,0 10.74,2.091 14.896,6.271 4.156,4.18 6.234,9.277 6.234,15.291 0,5.956 -2.051,10.997 -6.15,15.123 -4.102,4.127 -9.076,6.189 -14.926,6.189 -6.127,0 -11.219,-2.118 -15.273,-6.356 -4.055,-4.235 -6.08,-9.269 -6.08,-15.097 0,-3.903 0.943,-7.492 2.832,-10.766 1.889,-3.275 4.484,-5.869 7.789,-7.785 3.305,-1.913 6.863,-2.87 10.678,-2.87 z m -0.084,7.602 c -3.779,0 -6.955,1.313 -9.529,3.94 -2.574,2.627 -3.861,5.967 -3.861,10.02 0,4.514 1.621,8.084 4.861,10.711 2.52,2.053 5.408,3.08 8.668,3.08 3.686,0 6.824,-1.332 9.416,-3.995 2.594,-2.665 3.891,-5.948 3.891,-9.852 0,-3.886 -1.307,-7.175 -3.918,-9.866 -2.611,-2.691 -5.788,-4.038 -9.528,-4.038 z" /><path
id="path3678"
d="m 322.195,228.112 7.645,0 5.898,26.058 7.287,-26.058 6.463,0 7.396,26.058 5.842,-26.058 7.645,0 -9.197,40.821 -7.453,0 -7.521,-26.391 -7.381,26.391 -7.383,0 -9.241,-40.821 z" /><path
id="path3680"
d="m 375.324,228.112 22.285,0 0,7.603 -14.57,0 0,7.383 14.57,0 0,7.465 -14.57,0 0,10.74 14.57,0 0,7.631 -22.285,0 0,-40.822 z" /><path
id="path3682"
d="m 404.242,228.112 8.232,0 c 4.51,0 7.721,0.401 9.633,1.206 1.912,0.805 3.451,2.143 4.615,4.011 1.164,1.868 1.746,4.08 1.746,6.633 0,2.683 -0.643,4.925 -1.928,6.729 -1.287,1.804 -3.225,3.169 -5.814,4.094 l 9.672,18.148 -8.494,0 -9.18,-17.288 -0.711,0 0,17.288 -7.771,0 0,-40.821 z m 7.772,15.956 2.434,0 c 2.471,0 4.174,-0.324 5.104,-0.974 0.932,-0.649 1.398,-1.728 1.398,-3.229 0,-0.891 -0.23,-1.666 -0.691,-2.326 -0.463,-0.658 -1.08,-1.131 -1.854,-1.42 -0.775,-0.287 -2.195,-0.432 -4.262,-0.432 l -2.129,0 0,8.381 z" /></g></g>
<a id="g3829" xlink:href="javascript:toggle();" ><path
d="m 188.678,276.656 2.551,0 c 1.42,0 2.383,0.059 2.889,0.174 0.76,0.176 1.377,0.549 1.854,1.121 0.475,0.57 0.713,1.275 0.713,2.111 0,0.698 -0.164,1.311 -0.492,1.838 -0.328,0.529 -0.795,0.929 -1.404,1.199 -0.609,0.27 -1.451,0.408 -2.523,0.414 l 4.602,5.941 -1.582,0 -4.602,-5.941 -0.725,0 0,5.941 -1.279,0 0,-12.798 z m 1.279,1.254 0,4.351 2.205,0.017 c 0.854,0 1.486,-0.082 1.896,-0.244 0.408,-0.162 0.729,-0.421 0.957,-0.777 0.23,-0.357 0.346,-0.756 0.346,-1.197 0,-0.43 -0.117,-0.818 -0.35,-1.17 -0.233,-0.352 -0.537,-0.602 -0.914,-0.754 -0.379,-0.15 -1.006,-0.225 -1.883,-0.225 l -2.257,0 z"
id="path3688"/><path
d="m 199.076,276.656 7.334,0 0,1.254 -6.055,0 0,4.01 6.004,0 0,1.254 -6.004,0 0,5.029 6.004,0 0,1.252 -7.283,0 0,-12.799 z"
id="path3690"/><path
d="m 208.266,276.656 6.412,0 0,1.254 -5.135,0 0,4.01 5.135,0 0,1.254 -5.135,0 0,6.281 -1.277,0 0,-12.799 z"
id="path3692"/><path
d="m 216.617,276.656 2.549,0 c 1.422,0 2.385,0.059 2.889,0.174 0.76,0.176 1.379,0.549 1.854,1.121 0.477,0.57 0.715,1.275 0.715,2.111 0,0.698 -0.164,1.311 -0.492,1.838 -0.328,0.529 -0.797,0.929 -1.406,1.199 -0.607,0.27 -1.449,0.408 -2.521,0.414 l 4.602,5.941 -1.582,0 -4.604,-5.941 -0.723,0 0,5.941 -1.279,0 0,-12.798 z m 1.279,1.254 0,4.351 2.205,0.017 c 0.854,0 1.486,-0.082 1.895,-0.244 0.41,-0.162 0.73,-0.421 0.959,-0.777 0.23,-0.357 0.344,-0.756 0.344,-1.197 0,-0.43 -0.115,-0.818 -0.348,-1.17 -0.233,-0.352 -0.537,-0.602 -0.916,-0.754 -0.377,-0.15 -1.004,-0.225 -1.881,-0.225 l -2.258,0 z"
id="path3694"/><path
d="m 227.016,276.656 7.334,0 0,1.254 -6.055,0 0,4.01 6.004,0 0,1.254 -6.004,0 0,5.029 6.004,0 0,1.252 -7.283,0 0,-12.799 z"
id="path3696"/><path
d="m 234.881,287.072 1.088,-0.654 c 0.766,1.411 1.65,2.115 2.654,2.115 0.428,0 0.832,-0.1 1.209,-0.301 0.377,-0.199 0.664,-0.469 0.861,-0.804 0.197,-0.337 0.295,-0.694 0.295,-1.071 0,-0.429 -0.145,-0.85 -0.434,-1.262 -0.4,-0.567 -1.131,-1.252 -2.193,-2.053 -1.066,-0.807 -1.73,-1.389 -1.992,-1.748 -0.453,-0.604 -0.68,-1.256 -0.68,-1.959 0,-0.557 0.135,-1.064 0.4,-1.522 0.268,-0.458 0.643,-0.818 1.127,-1.084 0.484,-0.263 1.012,-0.396 1.58,-0.396 0.604,0 1.166,0.15 1.691,0.449 0.525,0.299 1.08,0.848 1.666,1.648 l -1.043,0.791 c -0.482,-0.637 -0.893,-1.059 -1.232,-1.261 -0.338,-0.204 -0.709,-0.306 -1.109,-0.306 -0.516,0 -0.938,0.157 -1.266,0.471 -0.328,0.312 -0.49,0.699 -0.49,1.156 0,0.279 0.057,0.549 0.174,0.811 0.115,0.26 0.326,0.545 0.635,0.852 0.168,0.164 0.719,0.59 1.652,1.279 1.109,0.818 1.869,1.546 2.279,2.185 0.412,0.638 0.619,1.278 0.619,1.923 0,0.929 -0.354,1.734 -1.059,2.418 -0.703,0.686 -1.561,1.028 -2.57,1.028 -0.777,0 -1.482,-0.208 -2.113,-0.624 -0.632,-0.413 -1.216,-1.107 -1.749,-2.081 z"
id="path3698"/><path
d="m 244.705,276.656 1.279,0 0,5.369 6.516,0 0,-5.369 1.279,0 0,12.799 -1.279,0 0,-6.177 -6.516,0 0,6.177 -1.279,0 0,-12.799 z"
id="path3700"/></a><path
id="path3702"
d="m 264.918,276.334 1.244,0 0,16.584 -1.244,0 0,-16.584 z" />
<a id="g3838" xlink:href="javascript:toggle2();"><path
d="m 277.377,276.656 2.551,0 c 1.42,0 2.383,0.059 2.889,0.174 0.76,0.176 1.377,0.549 1.854,1.121 0.475,0.57 0.713,1.275 0.713,2.111 0,0.698 -0.164,1.311 -0.492,1.838 -0.328,0.529 -0.795,0.929 -1.404,1.199 -0.609,0.27 -1.451,0.408 -2.523,0.414 l 4.602,5.941 -1.582,0 -4.602,-5.941 -0.725,0 0,5.941 -1.279,0 0,-12.798 z m 1.279,1.254 0,4.351 2.205,0.017 c 0.854,0 1.486,-0.082 1.896,-0.244 0.408,-0.162 0.729,-0.421 0.957,-0.777 0.23,-0.357 0.346,-0.756 0.346,-1.197 0,-0.43 -0.117,-0.818 -0.35,-1.17 -0.233,-0.352 -0.537,-0.602 -0.914,-0.754 -0.379,-0.15 -1.006,-0.225 -1.883,-0.225 l -2.257,0 z"
id="path3704"
/><path
d="m 287.775,276.656 7.334,0 0,1.254 -6.055,0 0,4.01 6.004,0 0,1.254 -6.004,0 0,5.029 6.004,0 0,1.252 -7.283,0 0,-12.799 z"
id="path3706"
/><path
d="m 295.988,276.656 1.393,0 4.242,9.889 4.311,-9.889 1.393,0 -5.568,12.799 -0.279,0 -5.492,-12.799 z"
id="path3708"/><path
d="m 308.936,276.656 1.279,0 0,12.799 -1.279,0 0,-12.799 z"
id="path3710"
/><path
d="m 311.816,276.656 1.391,0 4.242,9.889 4.312,-9.889 1.391,0 -5.568,12.799 -0.277,0 -5.491,-12.799 z"
id="path3712"
/><path
d="m 324.955,276.656 7.334,0 0,1.254 -6.057,0 0,4.01 6.004,0 0,1.254 -6.004,0 0,5.029 6.004,0 0,1.252 -7.281,0 0,-12.799 z"
id="path3714"
/></a><path
id="path3716"
d="m 342.521,276.334 1.244,0 0,16.584 -1.244,0 0,-16.584 z" /><a
id="g3846" xlink:href="javascript:toggle3();"><path
d="m 354.982,276.656 2.549,0 c 1.422,0 2.385,0.059 2.889,0.174 0.76,0.176 1.377,0.549 1.854,1.121 0.475,0.57 0.713,1.275 0.713,2.111 0,0.698 -0.164,1.311 -0.49,1.838 -0.328,0.529 -0.797,0.929 -1.406,1.199 -0.609,0.27 -1.449,0.408 -2.523,0.414 l 4.604,5.941 -1.582,0 -4.604,-5.941 -0.723,0 0,5.941 -1.279,0 0,-12.798 z m 1.28,1.254 0,4.351 2.205,0.017 c 0.854,0 1.484,-0.082 1.895,-0.244 0.411,-0.162 0.729,-0.421 0.959,-0.777 0.229,-0.357 0.344,-0.756 0.344,-1.197 0,-0.43 -0.115,-0.818 -0.348,-1.17 -0.233,-0.352 -0.539,-0.602 -0.916,-0.754 -0.377,-0.15 -1.006,-0.225 -1.883,-0.225 l -2.256,0 z"
id="path3718"
/><path
d="m 365.381,276.656 7.334,0 0,1.254 -6.057,0 0,4.01 6.004,0 0,1.254 -6.004,0 0,5.029 6.004,0 0,1.252 -7.281,0 0,-12.799 z"
id="path3720"
/><path
d="m 374.578,289.455 0,-12.799 0.277,0 8.518,9.811 0,-9.811 1.262,0 0,12.799 -0.287,0 -8.447,-9.691 0,9.691 -1.323,0 z"
id="path3722"
/><path
d="m 387.402,276.656 7.336,0 0,1.254 -6.057,0 0,4.01 6.004,0 0,1.254 -6.004,0 0,5.029 6.004,0 0,1.252 -7.283,0 0,-12.799 z"
id="path3724"
/><path
d="m 395.869,276.656 1.314,0 2.613,9.223 3.67,-9.223 0.266,0 3.625,9.223 2.66,-9.223 1.305,0 -3.678,12.799 -0.238,0 -3.799,-9.685 -3.871,9.685 -0.238,0 -3.629,-12.799 z"
id="path3726"
/></a>
</svg>
</div>
<div class="story" id="refresh">
<p>How many special people change
How many lives are living strange
Where were you when we were getting high?
Slowly walking down the hall
Faster than a cannon ball
Where were you while we were getting high?
Some day you will find me
Caught beneath the landslide
In a champagne supernova in the sky
Some day you will find me
Caught beneath the landslide
In a champagne supernova
A champagne supernova in the sky</p>
</div>
<div class="story" id="revive">
<p>The snow glows white on the mountain tonight
Not a footprint to be seen
A kingdom of isolation,
And it looks like I'm the queen.
The wind is howling like this swirling storm inside
Couldn't keep it in, heaven knows I tried!
Don't let them in, don't let them see
Be the good girl you always have to be
Conceal, don't feel, don't let them know
Well, now they know!</p>
</div>
<div class="story" id="renew">
<p>I was staring at the sky, just looking for a star
To pray on, or wish on, or something like that
I was having a sweet fix of a daydream of a boy
Whose reality I knew, was a hopeless to be had
But then the dove of hope began its downward slope
And I believed for a moment that my chances
Were approaching to be grabbed
But as it came down near, so did a weary tear
I thought it was a bird, but it was just a paper bag
Hunger hurts, and I want him so bad, oh it kills
'Cause I know I'm a mess he don't wanna clean up
I got to fold 'cause these hands are too shaky to hold
Hunger hurts, but starving works, when it costs too much to love</p>
</div>
<div class="nav">
<ul>
<li><a id="navblue" href="#">Harmony Heart Camp</a></li>
<li><a id="navgreen" href="#">Green</a></li>
<li><a id="navyellow" href="#">Camp Commanche</a></li>
<li><a id="navorange" href="#">St. Paul's House</a></li>
</ul>
</div>
<div class="mission">
<p>
Empower is a group of organizations that are committed to the enrichment and development of children and families. Empower's task is to provide step by step assistance, helping our children become productive members of society.</p>
</div>
</div>
</body>
Upvotes: 1
Views: 3022
Answers (2)
Paul LeBeau
Reputation: 101820
The real reason for all your extra whitespace is simple. In your SVG you have specified a viewBox of "0 0 600 400" (a 600x400 area with origin at 0,0), but your drawing only occupies a much smaller region in the middle of that.
If you fix the viewBox, the graphic will conform to the size you give to the SVG. Your unwanted whitespace will disappear.
Change
viewBox="0 0 600 400"
to
viewBox="169.6 107.0 261 186"
Upvotes: 2
Angivare
Reputation: 476
Simply use negative margins.
#empowering {
margin: -300px auto;
}
This will crop 300px from your #empowering container in the top and bottom directions.
Upvotes: 0
Related Questions
- svg content exceeds element
- <svg> is larger than <use>
- trim the extra space of SVG without changing its size
- SVG Oversized on Load
- How can I get rid of the space my SVG is taking up and why am I unable to change its size?
- SVG element has too much extra space
- SVG take up 400% of screensize
- SVG shows content outside of viewBox when it fills whole browser window
- SVG is not fitting to screen size - why?
- html and svg sizing issue