如何让svg的一半透明？

Question

I made a simple svg with Adobe xd.

    <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
As you can see, It has a path but svg covers the whole screen.So, is there any way to make the white part, transparent to put some text? (I know that i could write my text in XD and export all of them, but I want to know it is posbble to do something like that or not.)

this is what i want to do, all the text should be in svg.

Answer 1

You can put your text into a div which is positioned absolute. That means it wont alter the position of the svg coming after it.

As your svg is in fact transparent on the left/top you don't need to move the text on top of it, but if the svg had say white there then you'd need to give the text div a higher z-index, to bring it forward towards the reader.

Here's the snippet:

 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>