我正在嘗試將SVG文件放入div，但確定SVG大小無法正常工作

與標題說的一樣，我試圖將SVG加載到div中，我已將SVG的代碼複製並粘貼到我的HTML，然後調整它包含的div。當我這樣做時，整個SVG變成了我所要求的大小，但是當我這樣說的時候存在「隱形填充」，我的意思是說實際路徑沒有佔用250x250我想要的px。我正在嘗試將SVG文件放入div，但確定SVG大小無法正常工作

這裏是我的HTML：

<header> 

    <div id="logo"> 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?> 
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
    <svg width="100%" height="100%" viewBox="0 0 804 804" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> 
     <clipPath id="_clip1"> 
     <path id="Artboard4" d="M804,402c0,-221.87 -180.13,-402 -402,-402c-221.87,0 -402,180.13 -402,402c0,221.87 180.13,402 402,402c221.87,0 402,-180.13 402,-402Z"/> 
     </clipPath> 
     <g clip-path="url(#_clip1)"> 
     <g> 
      <path d="M381.924,101.027l-80.257,0c0,0 -80.386,-0.443 -80.256,80.257c0.129,80.7 0,120.385 0,120.385c0,0 0.414,80.104 80.256,80.257c79.843,0.152 -40.128,0 -40.128,0c0,0 -80.279,-0.283 -80.257,80.256c0.022,80.54 0,160.514 0,160.514c0,0 -0.382,80.211 80.257,80.256c80.639,0.046 120.385,0 120.385,0l0,-80.256l-80.257,0c0,0 -39.943,-0.666 -40.128,-40.129c-0.185,-39.463 0,-80.256 0,-80.256c0,0 0.089,-40.119 40.128,-40.129c40.04,-0.009 80.257,0 80.257,0l0,-160.513l-40.128,0c0,0 -40.318,-0.787 -40.129,-40.128c0.19,-39.341 0,-40.129 0,-40.129c0,0 0.398,-40.156 40.129,-40.128c39.73,0.028 40.128,0 40.128,0l0,-80.257Z" style="fill:#3c7abe;"/> 
      <path d="M422.052,101.027l80.257,0c0,0 79.98,0.947 80.257,80.257c0.276,79.311 0,120.385 0,120.385c0,0 -0.689,79.91 -80.257,80.257c-79.568,0.347 40.128,0 40.128,0c0,0 80.204,1.599 80.257,80.256c0.053,78.658 0,240.77 0,240.77l-80.257,0l0,-200.641c0,0 -0.753,-40.321 -40.128,-40.129c-39.375,0.193 -80.257,0 -80.257,0l0,-160.513l40.129,0c0,0 39.387,-0.713 40.128,-40.128c0.741,-39.415 0,-40.129 0,-40.129c0,0 -0.679,-39.958 -40.128,-40.128c-39.45,-0.17 -40.129,0 -40.129,0l0,-80.257Z" style="fill:#3c7abe;"/> 
     </g> 
     </g> 
    </svg> 

    </div> 

</header>

這裏是我的CSS：

#header { 
width: 100%; 
border: solid black 1px; 
length: 2000px; 
} 

#logo { 
height: 250px; 
width: 250px; 
margin: 0px; 
border: 0px; 
padding: 0px; 
border: solid blue 5px; 
}

來源

2016-11-16 BenRichi_

我所看到的是'夾子-path'正在填充，不是嗎？ – jackJoe

@jackJoe如果我在css填充0中給出g，那麼它仍然存在，但是，如果是這樣，那麼它肯定會擺脫它，或者我做錯了嗎？ –

我真的看不到額外的填充，你可以做一些插圖嗎？還有，什麼瀏覽器+版本？ – jackJoe

可以在2個步驟解決這個問題：

從刪除width="100%" height="100%"你的<svg>元素

然後，添加下列樣式到你的樣式表：

header svg { 
position: relative; 
top: -13%; 
left: -13%; 
width: 125%; 
height: 125%; 
}

參見：

#header { 
 
width: 100%; 
 
border: solid black 1px; 
 
length: 2000px; 
 
} 
 

 
#logo { 
 
height: 250px; 
 
width: 250px; 
 
margin: 0px; 
 
border: 0px; 
 
padding: 0px; 
 
border: solid blue 5px; 
 
} 
 

 
header svg { 
 
position: relative; 
 
top: -13%; 
 
left: -13%; 
 
width: 125%; 
 
height: 125%; 
 
}

<header> 
 

 
    <div id="logo"> 
 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?> 
 
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
 
    <svg viewBox="0 0 804 804" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> 
 
     <clipPath id="_clip1"> 
 
     <path id="Artboard4" d="M804,402c0,-221.87 -180.13,-402 -402,-402c-221.87,0 -402,180.13 -402,402c0,221.87 180.13,402 402,402c221.87,0 402,-180.13 402,-402Z"/> 
 
     </clipPath> 
 
     <g clip-path="url(#_clip1)"> 
 
     <g> 
 
      <path d="M381.924,101.027l-80.257,0c0,0 -80.386,-0.443 -80.256,80.257c0.129,80.7 0,120.385 0,120.385c0,0 0.414,80.104 80.256,80.257c79.843,0.152 -40.128,0 -40.128,0c0,0 -80.279,-0.283 -80.257,80.256c0.022,80.54 0,160.514 0,160.514c0,0 -0.382,80.211 80.257,80.256c80.639,0.046 120.385,0 120.385,0l0,-80.256l-80.257,0c0,0 -39.943,-0.666 -40.128,-40.129c-0.185,-39.463 0,-80.256 0,-80.256c0,0 0.089,-40.119 40.128,-40.129c40.04,-0.009 80.257,0 80.257,0l0,-160.513l-40.128,0c0,0 -40.318,-0.787 -40.129,-40.128c0.19,-39.341 0,-40.129 0,-40.129c0,0 0.398,-40.156 40.129,-40.128c39.73,0.028 40.128,0 40.128,0l0,-80.257Z" style="fill:#3c7abe;"/> 
 
      <path d="M422.052,101.027l80.257,0c0,0 79.98,0.947 80.257,80.257c0.276,79.311 0,120.385 0,120.385c0,0 -0.689,79.91 -80.257,80.257c-79.568,0.347 40.128,0 40.128,0c0,0 80.204,1.599 80.257,80.256c0.053,78.658 0,240.77 0,240.77l-80.257,0l0,-200.641c0,0 -0.753,-40.321 -40.128,-40.129c-39.375,0.193 -80.257,0 -80.257,0l0,-160.513l40.129,0c0,0 39.387,-0.713 40.128,-40.128c0.741,-39.415 0,-40.129 0,-40.129c0,0 -0.679,-39.958 -40.128,-40.128c-39.45,-0.17 -40.129,0 -40.129,0l0,-80.257Z" style="fill:#3c7abe;"/> 
 
     </g> 
 
     </g> 
 
    </svg> 
 

 
    </div> 
 

 
</header>

來源

2016-11-16 10:15:55 Rounin

感謝您的回覆Rounin，但徽標仍然小於您的示例中的div，我希望SVG中的字母填充整個div –

我錯誤地寫了'＃header' CSS中的'header'。現在再試一次。 – Rounin

看起來好多了，謝謝！如果我用Chrome瀏覽這個實際的SVG元素現在比div大，所以這些字母符合div，這應該是這樣嗎？這是檢查的屏幕截圖http://imgur.com/iQT5aq7 –

我正在嘗試將SVG文件放入div，但確定SVG大小無法正常工作

回答

相關問題