我正在嘗試創(chuàng)建一個(gè)頂部和底部具有彎曲邊緣的 div。我在 Inkscape 中創(chuàng)建了一個(gè)彎曲邊框，并在 HTML 中導(dǎo)入了 SVG 代碼。我面臨的問題是 SVG 在 Firefox 中完美運(yùn)行，但在 Chrome 中 SVG 不會隨窗口大小縮放。它保持一定的寬度并且不會縮放。這是一個(gè)包含 HTML 和 CSS 的 Codepen 項(xiàng)目：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" >
SVG 在 Chrome 中無法縮放
阿波羅的戰(zhàn)車
2023-12-19 10:00:24
