我正在嘗試創建一個頂部和底部具有彎曲邊緣的 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 關注
- 206 瀏覽
添加回答
舉報
0/150
提交
取消