您好，我正在尝试制作一张具有动态宽度和高度的卡片，它有一个切口，您可以通过切口看到背景。父 div 可以具有任意大小，并且可以放置在页面的任何位置。我的透明切口应根据父 div 的宽度进行缩放，保持其比例并且应始终位于 div 的中心。我用 inkscape 构建了 svg-path 部分，然后手动添加了屏蔽部分。
理想情况下，我更愿意在 svg-path 周围反向剪辑 div 背景颜色本身，以使其更简单。我只是没有成功...
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example for placeholder</title>
<style>
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;
background: url("hg.png") repeat;
}
#box {
margin: 40px auto;
position: relative;
width: 850px;//This should be flexible
height: 1240px;//This should be flexible
background: transparent center/cover;
border-radius: 20px;
}
</style>
</head>
<body>
<div id="box">
<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"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100%"
height="100%"
version="1.1"
id="svg839"
sodipodi:docname="auschnitt.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)">
<metadata
id="metadata845">
<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>
<defs
id="defs843" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="2048"
inkscape:window-height="1017"
id="namedview841"
showgrid="false"
inkscape:zoom="0.65967742"
inkscape:window-maximized="1"
inkscape:current-layer="svg839"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" />
<mask
id="g837"
style="fill:#000000">
<rect width="100%" height="100%" fill="white"/>
<path
style="fill:#000000;"
d="m 425,40 a 40,40 0 0 0 -40,40 h -85 c -19.39,0 -35,15.61 -35,35 0,19.39 15.61,35 35,35 h 250 c 19.39,0 35,-15.61 35,-35 0,-19.39 -15.61,-35 -35,-35 H 465 A 40,40 0 0 0 425,40 Z"
id="rect833"
inkscape:connector-curvature="0"/>
</mask>
<rect fill="grey" width="100%" height="100%" mask="url(#g837)" rx="35" ry="35"/>
</svg>
</div>
</body>
</html>```
[1]: /image/i0jTP.png
最佳答案
我认为你应该使用嵌套的 svg。元素的相对位置没有问题。
关于css - 如何从根据动态父 div 缩放的路径构建反向 svg 掩码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58428603/