如何让svg的一半透明？

Question

我用 Adobe xd 做了一个简单的 svg。

    <svg width="1366" height="667" viewBox="0 0 1366 667" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M257.992 530.241C129.811 537.919 32.5885 624.613 0 667H1366V0C1327.98 6.39808 1225.87 44.1468 1121.59 143.957C1017.3 243.767 895.278 275.117 847.3 278.317C716.946 278.317 657.201 331.101 570.298 407.878C483.396 484.655 418.219 520.644 257.992 530.241Z" fill="#2723DE" fill-opacity="0.8"/>
</svg>

https://codepen.io/v7193m/pen/dypbJVN
如您所见，它有一条路径，但 svg 覆盖了整个屏幕。那么，有什么办法可以使白色部分透明以放置一些文字？ （我知道我可以在 XD 中编写我的文本并将它们全部导出，但我想知道是否可以这样做。）

这就是我想做的，所有的文字都应该在 svg 中。

Answer 1

您可以将文本放入绝对定位的 div 中。 这意味着它不会改变紧随其后的 svg 的 position。

由于您的 svg 实际上在左侧/顶部是透明的，因此您不需要将文本移动到其顶部，但是如果 svg 在那里说白色，那么您需要为文本 div 提供更高的 z-index，把它带到读者面前。

这是片段：

 svg { position: relative; }.mytext { position: absolute; top:0; left: 0; padding: 20px; font-size: 3em; /*and any formatting ofyour text that you want */ }

 <div class="mytext">My text</div> <svg width="1366" height="667" viewBox="0 0 1366 667" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M257.992 530.241C129.811 537.919 32.5885 624.613 0 667H1366V0C1327.98 6.39808 1225.87 44.1468 1121.59 143.957C1017.3 243.767 895.278 275.117 847.3 278.317C716.946 278.317 657.201 331.101 570.298 407.878C483.396 484.655 418.219 520.644 257.992 530.241Z" fill="#2723DE" fill-opacity="0.8"/> </svg>