SVG將填充添加到其他元素

Question

我有一些問題讓SVG在我寫的佈局中發揮得很好。這裏是我一直在研究的工作表格單元佈局的例子。第一個jsfiddle鏈接到工作示例。當我出於某種原因使用SVG替換左側的文本時，右側列中的內容被壓下。任何想法爲什麼？

working example

broken example

工作實施例HTML：

<div id="wrapper"> 
<div id="row"> 
    <div id="left-col"> 
     There are many variations of passages of Lorem Ipsum available 
    </div> 
    <div id="right_col"> 
     <aside><strong>ASIDE</strong></aside> 
     <div id="banner1">Banner 1</div> 
    </div> 
</div> 

破碎的實施例HTML：

<div id="wrapper"> 
<div id="row"> 
    <div id="left-col"> 
     <div id="divMapContainer" class="embed-responsive embed-responsive-1by1"> 
      <svg width="400" height="100"> 
       <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)"></rect> 
      </svg> 
     </div> 
    </div> 
    <div id="right_col"> 
     <aside><strong>ASIDE</strong></aside> 
     <div id="banner1">Banner 1</div> 
    </div> 
</div> 

CSS：

body { 
    background-color: #333; 
    margin: 1em; 
} 

#wrapper { 
    width: 100%; 
    max-width: 46em; 
    margin: 0 auto; 
} 

@media (min-width: 48em) { 
    /* 768px */ 
    #wrapper { 
     display: table; 
    } 
    header { 
     display: table-header-group; 
    } 
    nav, 
    #banner2 { 
     display: block; 
    } 
    #row { 
     /* the rule below is redundant 
    thanks to SelenlT2 
*/ 
     /*display: table-cell;*/ 
    } 
    #left-col, 
    #right_col { 
     display: table-cell; 
    } 
    #left-col { 
     width: 50%; 
    } 
    footer { 
     display: table-footer-group; 
    } 
} 

#banner1 { 
    background-color: #9ed6f9; 
    height: 50%; 
} 

#left-col, 
#right_col { 
    background-color: #fff; 
} 

#right_col { 
    height: 100%; 
} 

aside { 
    background-color: #fbcdfa; 
    height: 50%; 
} 

#left-col, 
aside { 
    text-align: left; 
    padding: .5em; 
} 

nav, 
header, 
#banner1, 
#banner2, 
footer { 
    text-align: center; 
} 

.note { 
    color: #fff; 
    text-align: center; 
} 

Answer 1

這是因爲SVG元素是行內默認。您可以在SVG上設置vertical-align屬性，以便其他元素將對齊到頂部。 See updated fiddle。

svg { 
    vertical-align: top; 
}