Как построить обратную маску SVG из пути, который масштабируется в соответствии с динамическим родительским div - PullRequest
Новая
       59

Как построить обратную маску SVG из пути, который масштабируется в соответствии с динамическим родительским div

0 голосов
/ 17 октября 2019

Привет. Я пытаюсь построить карту с динамической шириной и высотой, в которой есть вырез, через который вы можете видеть фон. Родительский элемент div может иметь любой размер и может быть размещен в любом месте на странице. Мой прозрачный вырез должен масштабироваться в соответствии с шириной родительского элемента div, сохранять его пропорции и всегда должен оставаться в центре элемента div. Я собрал часть svg-path с помощью inkscape и впоследствии добавил часть маскирования.
В идеале я бы предпочел просто обрезать сам цвет фона divs вокруг svg-path, чтобы сделать его проще. Мне просто не удалось это сделать ... 

<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

1 Ответ

1 голос
/ 17 октября 2019

Я думаю, что вы должны использовать вложенные SVG. Нет проблем с относительным расположением элементов.

...