google-chrome - Chrome 中的 SVG 比 Firefox 中的 SVG 更宽

Question

我网站上的 Logo 是内联 SVG 而且效果很好

但由于某些奇怪的原因，Chrome 将 SVG 视为宽度为 300 像素，但 Firefox 不会并正确显示 SVG

结果是，当使用 Chrome 时，它​​会在实际 SVG 内容的两侧添加大量空白区域并将其居中。
图片可见here
所有 HTML、CSS 等都可以在这里获得 http://codepen.io/peterbrinck/pen/JYNPNp

这是 SVG
也许这很明显，只是因为我对 SVG 的了解还不够

<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"
    version="1.1"
    id="roboto-svg"
    x="0px"
    y="0px"
    viewBox="0 0 390.03581 103.1359"
    enable-background="new 0 0 841.9 595.3"
    xml:space="preserve"
    inkscape:version="0.48.4 r9939"
    width="100%"
    height="100%"
    sodipodi:docname="robot.svg"><metadata
    id="metadata27"><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></dc:title></cc:Work></rdf:RDF></metadata><defs
    id="defs25" /><sodipodi:namedview
    pagecolor="#ffffff"
    bordercolor="#666666"
    borderopacity="1"
    objecttolerance="10"
    gridtolerance="10"
    guidetolerance="10"
    inkscape:pageopacity="0"
    inkscape:pageshadow="2"
    inkscape:window-width="1855"
    inkscape:window-height="1056"
    id="namedview23"
    showgrid="false"
    fit-margin-top="3"
    fit-margin-left="3"
    fit-margin-right="3"
    fit-margin-bottom="3"
    inkscape:zoom="1.4142136"
    inkscape:cx="-49.249423"
    inkscape:cy="172.6809"
    inkscape:window-x="65"
    inkscape:window-y="24"
    inkscape:window-maximized="1"
    inkscape:current-layer="Layer_1" /><path
    stroke-miterlimit="10"
    d="m 45.717895,50.417894 c -9.3,-9.3 -24.3,-9.3 -33.6,0 v 40.6"
    id="path9"
    inkscape:connector-curvature="0"
    style="fill:none;stroke:#39cccc;stroke-width:18.23579979;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10" /><circle
    stroke-miterlimit="10"
    cx="455.10001"
    cy="312.70001"
    r="23.799999"
    id="circle15-7"
    sodipodi:cx="455.10001"
    sodipodi:cy="312.70001"
    sodipodi:rx="23.799999"
    sodipodi:ry="23.799999"
    style="fill:none;stroke:#39cccc;stroke-width:18.23600006;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"
    transform="translate(-365.475,-245.56411)" /><circle
    stroke-miterlimit="10"
    cx="385.20001"
    cy="312.70001"
    r="23.799999"
    id="circle11"
    sodipodi:cx="385.20001"
    sodipodi:cy="312.70001"
    sodipodi:rx="23.799999"
    sodipodi:ry="23.799999"
    style="fill:none;stroke:#39cccc;stroke-width:18.23600006;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"
    transform="translate(-225.5821,-245.48211)" /><line
    stroke-miterlimit="10"
    x1="135.81789"
    y1="67.217911"
    x2="135.81789"
    y2="12.1179"
    id="line13"
    style="fill:none;stroke:#39cccc;stroke-width:18.23579979;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10" /><circle
    stroke-miterlimit="10"
    cx="455.10001"
    cy="312.70001"
    r="23.799999"
    id="circle15"
    sodipodi:cx="455.10001"
    sodipodi:cy="312.70001"
    sodipodi:rx="23.799999"
    sodipodi:ry="23.799999"
    style="fill:none;stroke:#39cccc;stroke-width:18.23600006;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"
    transform="translate(-225.5821,-245.48211)" /><path
    stroke-miterlimit="10"
    d="m 310.7179,84.017894 c -9.3,9.3 -24.3,9.3 -33.6,0 v -64.9"
    id="path17"
    inkscape:connector-curvature="0"
    style="fill:none;stroke:#39cccc;stroke-width:18.23579979;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10" /><line
    stroke-miterlimit="10"
    x1="277.11792"
    y1="43.417889"
    x2="301.11792"
    y2="43.417889"
    id="line19"
    style="fill:none;stroke:#39cccc;stroke-width:18.23579979;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10" /><circle
    stroke-miterlimit="10"
    cx="579.70001"
    cy="312.70001"
    r="23.799999"
    id="circle21"
    sodipodi:cx="579.70001"
    sodipodi:cy="312.70001"
    sodipodi:rx="23.799999"
    sodipodi:ry="23.799999"
    style="fill:none;stroke:#39cccc;stroke-width:18.23579979;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"
    transform="translate(-225.5821,-245.48211)" />
</svg>

Answer 1

我想通了

跟纵横比有关系 当在 SVG 中设置 width="100%"时，Chrome 以一种奇怪的方式保持纵横比，而不是调整整个 SVG 元素的大小，它只是根据 CSS 设置的高度调整 SVG 内容的大小