SVG占用太多空间

时间:2015-02-12 23:39:11

标签: html css svg

http://codepen.io/anon/pen/NPyxMg

我的SVG在它周围的各个方向都有很大的间距。我想要左右空间,但顶部和底部太多了。我该如何让它表现出来?样式表位于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>

2 个答案:

答案 0 :(得分:2)

所有额外空白的真正原因很简单。在你的SVG中,你指定了一个&#34; 0 0 600 400&#34; (一个600x400的区域,原点为0,0),但是你的绘图只占据了一个小得多的区域。

如果修复了viewBox,图形将符合您为SVG指定的大小。你不想要的空格会消失。

更改

viewBox="0 0 600 400"

viewBox="169.6 107.0 261 186"

答案 1 :(得分:0)

只需使用负边距。

#empowering {
    margin: -300px auto;
}

这将从#empowering容器的顶部和底部方向裁剪300px。