1

this code

<svg viewbox="0 0 100% 100%" width="100%" height="400px">
        <mask id="mask" x="0" y="0" width="100%" height="100%">
            <rect x="0" y="0" width="100%" height="100%" fill="#fff"/>
            <ellipse cx="50%" cy="50%" rx="100" ry="150" stroke="red" stroke-width="10"/>
        </mask>
        <rect x="0" y="0" width="100%" height="100%" mask="url(#mask)" fill-opacity="0.7"/>  
    </svg>

return this as a result

result

I want to have this same result, but with a red border instead of gray in the ellipse and that this is not affected by the opacity of the rect.

I also need the inside of the ellipse to be transparent (not white) and that it is not affected by the opacity of the rect.

Is this possible?

doğukan
  • 23,073
  • 13
  • 57
  • 69
Schwert
  • 43
  • 5
  • 1. You have an invalid viewBox attribute: viewbox="0 0 100% 100%" Use something like this instead: `viewBox="0 0 320 320"`. 2. For the hole remove `stroke="red" stroke-width="10"` from the ellipse, use the ellipse at the end of the svg element and add the `stroke="red" stroke-width="10"` to the `` element – enxaneta Dec 18 '20 at 09:15

2 Answers2

0

for set order you can use tag use with the attribute xlink:href for more detail see this How to use z-index in svg elements?

add fill="#fff" tag and id="one" to ellipse and draw it again with <use xlink:href="#one"/>

<svg viewbox="0 0 100% 100%" width="100%" height="400px">
    <mask id="mask" x="0" y="0" width="100%" height="100%">
        <rect x="0" y="0" width="100%" height="100%" fill="#fff"/>
        <ellipse id="one" cx="50%" cy="50%" rx="100" ry="150" stroke="red" fill="#fff" stroke-width="10"/>
    </mask>
    <rect x="0" y="0" width="100%" height="100%" mask="url(#mask)" fill-opacity="0.7"/>  
    <use xlink:href="#one"/>
</svg>
Shahryar Mohajer
  • 581
  • 3
  • 11
  • I'm sorry, my friend, but I need the inside of the circle to be transparent (not white) and that it is not affected by the opacity of the rect. – Schwert Dec 18 '20 at 08:19
0

If you are asking whether you can include a red ellipse as part of your mask, then the answer is no. Any colours in a mask are converted to alpha values.

If you want a red ellipse around your "hole", then you need to add it as a separate element on top of the rect.

body {
   background-color: linen;
}
<svg viewbox="0 0 100% 100%" width="100%" height="400px">
    <defs>
        <!-- pull ellipse out as a reusable shape. Used by mask and for red border. -->
        <ellipse id="one" cx="50%" cy="50%" rx="100" ry="150"/>

        <mask id="mask" x="0" y="0" width="100%" height="100%">
            <rect x="0" y="0" width="100%" height="100%" fill="#fff"/>
            <use xlink:href="#one" fill="black"/>
        </mask>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" mask="url(#mask)" fill-opacity="0.7"/>  
    <use xlink:href="#one" fill="none" stroke="red" stroke-width="10"/>
</svg>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181