如何调整` <svg> 图片？ 使用CSS或内联

Question

I have this graphic:

http://jsfiddle.net/6xzvK/

As you can see I have tried to reduce the height and the width of the image changing the width and height attributes inline, but the image doesn't get smaller but actually it is clipped..

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="422.90625" height="379.90625" id="svg9312" version="1.1" inkscape:version="0.48.4 r9939" sodipodi:docname="distancia.svg">
  <defs id="defs9314"/>
  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="547.89286" inkscape:cy="79.950317" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" showborder="true" inkscape:window-width="1280" inkscape:window-height="996" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" fit-margin-top="0" fit-margin-left="0" fit-margin-right="0" fit-margin-bottom="0"/>
  <metadata id="metadata9317">
    <rdf:RDF>
      <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
        <dc:title/>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(675.75,-132.40625)">
    <path inkscape:connector-curvature="0" style="fill:#cccccc;fill-opacity:1;stroke:#a7a7a7;stroke-width:40;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" d="m -617.67786,152.40969 406.78608,0 c 21.08533,0 38.05866,16.97395 38.05866,38.05836 l 0,363.78878 c 0,21.08442 -16.97333,38.05866 -38.05866,38.05866 l -406.78608,0 c -21.08229,0 -38.05866,-16.97424 -38.05866,-38.05866 l 0,-363.78878 c 0,-21.08441 16.97637,-38.05836 38.05866,-38.05836 z" id="path13632"/>
    <path inkscape:connector-curvature="0" style="fill:#ececec;fill-opacity:1;stroke:none" d="m -313.87975,305.7941 35.80527,0 0,197.61986 -35.80527,0 z" id="path13634"/>
    <path inkscape:connector-curvature="0" style="fill:#ececec;fill-opacity:1;stroke:none" d="m -436.01245,241.32064 35.82652,0 0,262.09332 -35.82652,0 z" id="path13636"/>
    <path inkscape:connector-curvature="0" style="fill:#ececec;fill-opacity:1;stroke:none" d="m -556.61758,305.7941 35.80526,0 0,197.61986 -35.80526,0 z" id="path13638"/>
  </g>
</svg>

Answer 1

Give the root <svg> element a viewBox attribute and it will scale rather than clip.

Something like this may work for you viewBox="0 0 800 400" but you might want to use the original width/height before you adjusted things.