与文本宽度缩放的SVG

我想在SVG中构建一个简单的横幅，它将在其内部的文本填充时缩放宽度。与文本宽度缩放的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

来源

2014-02-26 Neil

先给#containerdisplay:inline-block所以它收缩到它的孩子，然后进行svg有position:absolute，而不是一段，也给它z-index:-1;把它的段落后面。这是因为您的SVG元素默认为300px，而您不希望发生这种情况。

Demo

来源

2014-02-27 00:01:33

与文本宽度缩放的SVG

回答

相关问题