我正在尝试在 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 标签的大小。
最佳答案
尝试给 #container
display:inline-block
让它缩小到它的 child ,然后让 svg
有 位置: absolute
而不是段落,还给它 z-index:-1;
把它放在段落后面。这是因为您的 SVG 元素默认为 300px,这是您不希望发生的
关于html - 随文本宽度缩放的 SVG,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22055223/