Html 随文本宽度缩放的SVG
我正试图在SVG中构建一个简单的横幅,它可以在填充文本时缩放宽度 这是我目前的代码:Html 随文本宽度缩放的SVG,html,css,svg,Html,Css,Svg,我正试图在SVG中构建一个简单的横幅,它可以在填充文本时缩放宽度 这是我目前的代码: #container { height: 60px; position: relative; } #container > svg { width: 100%; height: 100%; } #container > p { position: absolute; left: 0; margin: 5% 10%; text-ali
#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>
草莓芒果
尝试给出#container
显示:内联块
使其收缩到其子级,然后使svg
具有位置:绝对
而不是段落,并给出z索引:-1
将其放在段落后面。这是因为SVG元素默认为300px,这是您不希望发生的