Question

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

但是由于一些奇怪的原因，Chrome正在踩着SVG，好像它的宽度为300px，但是火狐没有正确显示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的内容大小。 / p>

Chrome中的SVG比Firefox中的SVG宽

1 个答案: