我正在尝试创建一个顶部和底部具有弯曲边缘的 div。我在 Inkscape 中创建了一个弯曲边框，并在 HTML 中导入了 SVG 代码。我面临的问题是 SVG 在 Firefox 中完美运行，但在 Chrome 中 SVG 不会随窗口大小缩放。它保持一定的宽度并且不会缩放。这是一个包含 HTML 和 CSS 的 Codepen 项目：https://codepen.io/stephenhenckaerts/pen/MWawBWG<html> <body> <div class="about"> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="curve upper-curve" version="1.1" viewBox="0 0 210 34.533334" > <defs id="defs2" /> <metadata id="metadata5"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title></dc:title> </cc:Work> </rdf:RDF> </metadata> <g transform="translate(0,-262.46666)" id="layer1"> <path class="curve-path" d="m -2.078869,262.60416 c 0,0 6.9925594,15.49702 109.046129,19.27678 102.05357,3.77977 102.99852,11.1503 106.02232,11.90625 3.02381,0.75596 0.37798,11.52828 0.37798,11.52828 l -214.5014885,0.56696 z" style=" fill-opacity: 1; stroke-width: 0.26458332px; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 0; " /> </g> </svg> <div class="content"></div> <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" class="curve" version="1.1" viewBox="0 0 210 34.533334" >
1 回答
有只小跳蛙
TA贡献1824条经验 获得超8个赞
那是因为 Firefox 不支持height: fit-content;。只需将其删除，您就会在两个浏览器中获得相同的结果。
.curve {
width: 100%;
/* height: fit-content; */
fill: #0b3c49;
}
.curve-path {
margin: 0;
width: 100%;
height: 100%;
}
.upper-curve {
position: relative;
top: 0.3rem;
}
.content {
height: 500px;
background-color: #0b3c49;
}
<div class="about">
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
class="curve upper-curve"
version="1.1"
viewBox="0 0 210 34.533334"
>
<defs id="defs2" />
<metadata id="metadata5">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(0,-262.46666)" id="layer1">
<path
class="curve-path"
d="m -2.078869,262.60416 c 0,0 6.9925594,15.49702 109.046129,19.27678 102.05357,3.77977 102.99852,11.1503 106.02232,11.90625 3.02381,0.75596 0.37798,11.52828 0.37798,11.52828 l -214.5014885,0.56696 z"
style="
fill-opacity: 1;
stroke-width: 0.26458332px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 0;
"
/>
</g>
</svg>
<div class="content"></div>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
class="curve"
version="1.1"
viewBox="0 0 210 34.533334"
>
<defs id="defs2" />
<metadata id="metadata5">
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g transform="translate(0,-262.46666)" id="layer1">
<path
class="curve-path"
d="m 213.68306,298.88987 c 0,0 -6.99255,-15.49702 -109.04612,-19.27678 C 2.583366,275.83332 1.638416,268.46279 -1.385384,267.70684 c -3.02381,-0.75596 -0.37798,-11.52828 -0.37798,-11.52828 L 212.73812,255.6116 Z"
style="
fill-opacity: 1;
stroke-width: 0.26458332px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 0;
"
/>
</g>
</svg>
</div>
- 1 回答
- 0 关注
- 138 浏览
添加回答
举报
0/150
提交
取消