Chrome 中的 SVG 比 Firefox 中的 SVG 更宽答案

【问题标题】：SVG in Chrome is wider than SVG in FirefoxChrome 中的 SVG 比 Firefox 中的 SVG 更宽
【发布时间】：2016-01-01 13:16:10
【问题描述】：

我网站上的徽标是内联 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>

【问题讨论】：

这可能与显示 SVG 的 HTML/CSS 有关。可能与display 属性有关。这里没有足够的代码来确定。
@AlexanderO'Mara 我得出的结论是，这与 Chrome 调整 SVG 大小的方式有关。 SVG 的高度为 40 像素，由 CSS 定义。然后 Chrome 会调整 SVG 内容的大小，而不是调整整个元素的大小。如果我删除高度，它可以工作，但它太大了。
这与 SVG 本身无关，它与您对 svg 元素和/或其容器的样式有关。我们确实需要查看您的 HTML/CSS 来回答您的问题。
这里是所有影响 SVG 的 HTML 和 CSS codepen.io/peterbrinck/pen/JYNPNp

标签： google-chrome firefox svg

【解决方案1】：

我想通了

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

【讨论】：

您可能希望在上面发布您的 HTML 和 CSS，以便其他 SO 用户可以在您的回答中看到您的问题