Warum funktioniert Svg nicht im Bootstrap-Medienobjekt?

Ich habe versucht, Svg im Bootstrap-Medienobjekt zu verwenden und festgestellt, dass es nicht die minimale Breite braucht, wenn die Breite nicht explizit festgelegt ist. Z.B. Sehen Sie den einfachen Fall mit einem PNG-Bild:Warum funktioniert Svg nicht im Bootstrap-Medienobjekt?

<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>

Das PNG-Bild verwendet wird, hat von 64px Standardbreite, so dass es als 64px breites Bild zeigt. Betrachten wir nun das gleiche Beispiel mit einem 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>

Wir können in zweiten Beispiel sehen, dass die svg nicht dauert es Mindeststandardbreite wie ein png oder jpg tut. Auf der anderen Seite, wenn ich einfach zwei Bild-Tags im body-Tag habe und das erste Bild png ist und das zweite ist svg und beide Bilder haben keine explizit eingestellte Breite, dann nehmen beide Bilder ihre Standardbreite an.

Meine Frage ist, warum in Bootstrap Media-Objekt die Svg nehmen Sie die Standardbreite?

Quelle

2016-12-16 user31782

Bilder (gif/jpg/png) sind pixelbasiert, und standardmäßig haben sie width/height Werte, während SVG Vektorobjekte sind, und die width/height hängt davon ab, wer/was sie angezeigt wird.

In Ihrem Beispiel - das SVG hat ViewBox von 32 x 32 (die den Teil der Leinwand definiert, die angezeigt werden soll).

Sie können mehr über viewBox im Referenz lesen:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions

Wenn Sie die width und height innerhalb des svg zu wollen definieren:

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

Hier ist ein funktionierendes Beispiel (beachten Sie, dass Ich benutzte eine Inline-Svg hier):

<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>

Quelle

2016-12-16 14:58:30 Dekel

Aber wenn ich zwei Bilder im body-Tag habe als: ''. Nun habe ich die Attribute width und height auf keinem img-Tag erwähnt, aber beide haben ihre minimale Breite. Was ist im Bootstrap-Medienobjekt, das es so anzeigt, dass Svg diese minimale Breite nicht annimmt? – user31782

Der Browser zeigt das Bild basierend auf der Standardbreite/-höhe oder der Breite/Höhe des Containers im Falle von SVG an, das "display: block" ist (was für Sie der Fall ist). Da der Container keine Breite hat, hat das Svg-Image auch keine Breite. – Dekel

[@ user31782] (http://stackoverflow.com/users/3429430/user31782). Es ist sehr wahrscheinlich, dass 'example.svg', (in Ihrem Kommentar erwähnt) explizit die Eigenschaften' width' und 'height' angibt, also kein Problem. Wenn Sie das "img" -Tag überprüfen, das mit der 'media-object'-Klasse in Ihrem ursprünglichen Gist, können Sie sehen, dass es keine explizite css' width'-Eigenschaft hat. [@Dekel] (http://stackoverflow.com/users/5037551/dekel) Die Antwort ist der beste Weg, um es zu beheben. Wenn Sie jedoch eine Verbindung zu der extern gehosteten '.svg' herstellen müssen und keine Möglichkeit haben, das Svg-Asset zu reparieren, können Sie inline' style = "width: 64px; height: 64px; float: left;" zu 'img' tag . – RobC

Ich glaube, der Grund ist nicht Bootstrap. Kann dies sein wird help.

Quelle

2016-12-16 14:59:06 rinatoptimus

Warum funktioniert Svg nicht im Bootstrap-Medienobjekt?

Antwort

Verwandte Themen