问如何从根据动态父div缩放的路径构建反向svg蒙版
EN

Stack Overflow用户

提问于 2019-10-17 16:53:11

回答 1查看 50关注 0票数 0

嗨，我正在尝试建立一个具有动态宽度和高度的卡片，它有一个剪裁，通过它你可以看到背景。父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]: https://i.stack.imgur.com/i0jTP.png

css

svg

mask

clip

回答 1

Stack Overflow用户

发布于 2019-10-17 17:24:20

我认为你应该使用嵌套svg。元素的相对位置没有问题。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58428603

复制

相似问题

问如何从根据动态父div缩放的路径构建反向svg蒙版
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从根据动态父div缩放的路径构建反向svg蒙版EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从根据动态父div缩放的路径构建反向svg蒙版
EN