随文本宽度缩放的 SVG答案

【问题标题】：SVG that scales with text width随文本宽度缩放的 SVG
【发布时间】：2014-02-27 08:01:33
【问题描述】：

我正在尝试在 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

【问题讨论】：

标签： html css svg

【解决方案1】：

尝试给#containerdisplay:inline-block，使其缩小到它的孩子，然后让svg有position:absolute而不是段落，也给它z-index:-1;把它放在段落后面。这是因为您的 SVG 元素默认为 300px，这是您不希望发生的

Demo

【讨论】：