與文本寬度縮放的SVG

Question

我想在SVG中構建一個簡單的橫幅，它將在其內部的文本填充時縮放寬度。

這裏是我當前的代碼：

#container { 
    height: 60px; 
    position: relative; 
} 

#container > svg { 
    width: 100%; 
    height: 100%; 
} 

#container > p { 
    position: absolute; 
    left: 0; 
    margin: 5% 10%; 
    text-align: center; 
    color: white; 
} 

和HTML：

<div id="container"> 
    <span>Strawberry Mango</span> 
    <svg viewBox="0 0 10 10" preserveAspectRatio="none"> 
     <path d="M 0,0 L 10,0 9.5,5 10,10 0,10 0.5,5 z" fill="black"></path> 
     <path d="M 0.25,0.75 L 9.75,0.75 9.3,5 9.75,9.25 0.25,9.25 0.75,5 z" fill="orange"</path> 
     </svg> 
</div> 

其產生的橫幅是父元素的寬度爲100％，但我想它擴展到如果可能的話，p標籤的大小。

Here is a fiddle of it

Answer 1

先給#containerdisplay:inline-block所以它收縮到它的孩子，然後進行svg有position:absolute，而不是一段，也給它z-index:-1;把它的段落後面。這是因爲您的SVG元素默認爲300px，而您不希望發生這種情況。

Demo