爲什麼svg不能在引導媒體對象中工作？

我一直試圖在引導媒體對象中使用svg，並發現如果寬度沒有明確設置，它不會佔用最小寬度。例如。與PNG圖像考慮簡單情況：爲什麼svg不能在引導媒體對象中工作？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="media"> 
 
    <div class="media-left"> 
 
    <a href="#"> 
 
     <img class="media-object" src="https://www.tutorialspoint.com/bootstrap/images/64.jpg" alt="..."> 
 
    </a> 
 
    </div> 
 
    <div class="media-body"> 
 
    <h4 class="media-heading">Media heading</h4> 
 
    sample text. This is some sample text. This is some sample text. This is some sample text. This is some s 
 
    </div> 
 
</div>

使用PNG圖像具有64PX的缺省寬度從而它表明作爲64PX寬的圖像。現在考慮同樣的例子與SVG IMG：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="media"> 
 
    <div class="media-left"> 
 
    <a href="#"> 
 
     <img class="media-object" src="http://www.iconninja.com/files/93/412/839/social-online-media-pay-paypay-pal-icon.svg" alt="..."> 
 
    </a> 
 
    </div> 
 
    <div class="media-body"> 
 
    <h4 class="media-heading">Media heading</h4> 
 
    The random text that shows that the text that was suypposed to be the text. 
 
    </div> 
 
</div>

我們可以看到，在第二個例子中，SVG不採取它就像一個PNG或JPG確實最小默認寬度。另一方面，如果我只在body標籤中有兩個圖像標籤，第一個圖像是png，第二個是svg，並且兩個圖像都沒有明確設置寬度，那麼這兩個圖像都將採用其默認寬度。

我的問題是爲什麼在引導媒體對象的SVG採取它的默認寬度？

來源

2016-12-16 user31782

圖像（gif/jpg/png）是基於像素的，默認情況下它們具有width/height的值，而SVG是矢量對象，而width/height取決於顯示它們的是誰/什麼。

在你的例子中 - SVG的viewBox爲32 x 32（它定義了要顯示的畫布部分）。

您可以參考閱讀更多有關視框：
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions

如果你想可以定義svg內width和height：

<svg width="64" height="64"...> ... </svg>

下面是一個工作示例（請注意，我在這裏使用了內聯svg）：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="media"> 
 
    <div class="media-left"> 
 
    <a href="#"> 
 
     <img class="media-object" src='data:image/svg+xml;charset=UTF-8, 
 
<?xml version="1.0" ?><svg width="64" height="64" enable-background="new 0 0 32 32" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Flat_copy_7"><g><path d="M15.995,0c-8.837,0-16,7.163-16,16c0,8.836,7.163,16,16,16s16-7.164,16-16C31.995,7.163,24.831,0,15.995,0 z" fill="#E8E8E8"/></g><path d="M13.099,23.163l0.784-3.334c0,0,0.243-0.952,1.292-0.952c1.047,0,8.298,0.277,9.904-4.842 c0.589-1.871,0.997-6.31-6.324-6.31h-5.287c0,0-1.1-0.05-1.371,1.09L8.64,23.362c0,0-0.148,0.912,0.797,0.912 c0.946,0,2.36,0,2.36,0S12.886,24.333,13.099,23.163z M15.093,14.702l0.702-2.957c0,0,0.224-0.804,0.946-0.922 c0.722-0.12,1.951,0.02,2.268,0.079c2.054,0.376,1.617,2.272,1.617,2.272c-0.407,2.926-5.075,2.519-5.075,2.519 C14.818,15.435,15.093,14.702,15.093,14.702z" fill="#333333"/></g></svg>' alt="..."> 
 
    </a> 
 
    </div> 
 
    <div class="media-body"> 
 
    <h4 class="media-heading">Media heading</h4> 
 
    The random text that shows that the text that was suypposed to be the text. 
 
    </div> 
 
</div>

來源

2016-12-16 14:58:30 Dekel

但是如果我在body標籤中有兩個圖像：''。現在我在這裏沒有提到任何img標籤的寬度和高度屬性，但它們都取最小寬度。引導媒體對象中的內容以svg不會佔用最小寬度的方式顯示它？ – user31782

如果SVG是'display：block'（這是你的情況），瀏覽器將根據默認的寬度/高度或容器的寬度/高度來顯示圖像。由於容器沒有寬度 - svg-image也沒有寬度。 – Dekel

[@ user31782]（http://stackoverflow.com/users/3429430/user31782）。很有可能'example.svg'（在你的評論中提到過）明確指出'width'和'height'屬性，因此沒有問題。如果您檢查'img'標記，那麼在原始要點中具有'media-object'類的標記可以看到它沒有顯式的css'width'屬性。 [@Dekel]（http://stackoverflow.com/users/5037551/dekel）的答案是解決問題的最佳方法。但是，如果您必須鏈接到外部託管的'.svg'，並且無法修復svg資源，則可以將'style =「width：64px; height：64px; float：left;」'內聯到'img'標籤。 – RobC

我覺得原因不是Bootstrap。可能是這個help。

來源

2016-12-16 14:59:06 rinatoptimus

爲什麼svg不能在引導媒體對象中工作？

回答

相關問題