如何从根据动态父 div 缩放的路径构建反向 svg 掩码
Posted
技术标签:
【中文标题】如何从根据动态父 div 缩放的路径构建反向 svg 掩码【英文标题】：How do I build a inverse svg mask from a path which scales according to a dynamic parent div 【发布时间】：2019-10-17 08:53:10 【问题描述】：您好，我正在尝试制作一张具有动态宽度和高度的卡片，它有一个可以看到背景的切口。父 div 可以有任意大小，并且可以放置在页面上的任何位置。我的透视剪裁应根据父 div 的宽度进行缩放，保持其比例，并应始终保持在 div 的中心。我已经用inkscape构建了svg-path部分，然后手动添加了遮罩部分。 理想情况下，我宁愿在 svg-path 周围反向剪辑 divs 背景颜色本身，以使其更简单。我只是没有成功...
<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"
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-
inkscape:window-
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 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" mask="url(#g837)" rx="35" ry="35"/>
</svg>
</div>
</body>
</html>```
[1]: https://i.stack.imgur.com/i0jTP.png
【问题讨论】：
【参考方案1】：我认为你应该使用嵌套的 svg。元素的相对位置没有问题。
【讨论】：
<svg height="100%" width="100%" id="wrapperSvg"> <defs id="defs843"/> <mask id="g837" style="fill:#000000"> <svg id="firstSvg"> <rect width="100%" height="100%" fill="white"/> </svg> <svg id="secondSvg" > <path style="fill:#000000;" d="..." id="rect833" /> </svg> </mask> <svg id="thirdSvg"> <rect fill="grey" width="100%" height="100%" mask="url(#g837)" rx="35" ry="35"/> </svg> </svg>
仍然无法缩放或定位包含路径的 svg。有什么诀窍吗？以上是关于如何从根据动态父 div 缩放的路径构建反向 svg 掩码的主要内容，如果未能解决你的问题，请参考以下文章