What could be causing the partial transparency in my SVG mask?

I have been working on an interesting SVG code that creates a rectangle with a cutout circle. However, I am facing an issue where the non-cutout part appears to be partially transparent. https://i.sstatic.net/1PLHL.gif

Can anyone provide me with guidance on how to resolve this transparency issue in my SVG code? Here is the code snippet for reference:

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <mask id="mask" x="0" y="0" width="100" height="100">
      <rect x="0" y="0" width="100" height="100" fill="rgb(20, 182, 197)" fill-opacity="100%"></rect>
      <circle cx="50" cy="50" r="37.5"></circle>
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="100" mask="url(#mask)"  fill="rgb(20, 182, 197)" ></rect>
</svg>
htmlcsssvg

Answer №1

When using masks, the level of transparency is determined by the brightness of the color. By setting the rectangle's color to rgb(20, 182, 197), which has a 43% luminescence value, you will achieve 43% transparency. If you want the outer rectangle to be completely opaque, then the color must have 100% brightness (like white).

Therefore, make the following change:

<rect x="0" y="0" width="100" height="100" fill="rgb(20, 182, 197)" fill-opacity="100%">

to

<rect x="0" y="0" width="100" height="100" fill="white">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mobile viewing causing problems with website buttons functionality

While my website functions perfectly on desktop, I am facing an issue where the buttons are not working when accessed through mobile devices. Interestingly, these buttons were operating fine in a previous version of the site. Although I have made minimal ...

javascripthtmlcssmobile

What is the method for locating all anchor tags "In General" within the inner HTML of a div using XPath?

This query is related to a discussion on anchor tags in this thread. I am interested in identifying all anchor tags within a string. The scenario provided below is similar to the aforementioned issue, however, I aim to accomplish this using xpath and angu ...

javascripthtmlxpath

Why is my CSS media query failing to increase font size?

I can't seem to get the "media query" function to work properly. I've tried multiple times and searched for a solution without any luck. Below is the code snippet where I'm attempting to increase the font size from 44px to 70px on small devi ...

htmlcssbootstrap-4frontendbootstrap-5

Discovering the initial element with a data attribute above zero using JQuery

I am working with a set of divs that have the class .item-wrap. At the moment, I am able to select the first div using this code snippet: $(".item-wrap:first").trigger( "click" ); Each .item-wrap element comes with a data-amount attribute. My challenge ...

javascriptjqueryhtml

Activate search bar by clicking on it

I am currently attempting a basic jQuery example to expand a search bar on mouse click, but for some reason, my code is not working as expected. I have a simple jQuery function to display the input field when the button with the class "expand" is clicked, ...

javascriptjqueryhtmlcss

Create an alert box that covers the content

I have been struggling to get the alert boxes to overlap on my content without pushing it down. I have tried changing the position to absolute, relative, and fixed, but nothing seems to work. There was one time when it worked, but as soon as I saved, it ...

csssassbootstrap-5

How can a script be properly embedded into an HTML document?

Currently, I am facing an unusual issue with the script tags in my Django project. My layout.html file includes Jquery and Bootstrap in the head section. Using Jinja, I extended layout.html to create a new file called main.html. In main.html, I added a new ...

javascriptjqueryhtmldjango

Is there a way to include individual Facebook comments for each image within a jQuery lightbox?

After completing my own version of a lightbox using HTML5, CSS, and jQuery, I encountered an issue with the comments feature. While each image in the gallery should have separate comments, Facebook's comment system only records comments for the entire ...

jqueryhtmlfacebooklightboxfacebook-comments

How come I can click on both radio buttons simultaneously?

How come I can select both radio buttons simultaneously? <form #form="ngForm"> {{ poll.counter1 }} votes <input type="radio" id="{{ poll.choice1 }}" value="{{ poll.choice1 }}" (click)="onChoice1(form)">{{ poll.choice1 }} <br> ...

htmlangular

Set the current time to ISO8601 format

I need assistance with creating a "time passed" counter for my website based on an API call that returns data in the following format: "created_at": "2018-05-16T14:00:00Z", What is the best approach to calculate and display the time that has passed since ...

javascripthtmliso8601

Browsing a container with JavaScript

I am attempting to display one div at a time and scroll through them repeatedly. I found and modified a Fiddle that works as intended, but when I try to implement it on my own test page, the divs do not scroll as expected. Here is the Fiddle example: http ...

javascriptjqueryhtml

Tips for creating Java code that generates visually appealing colored HTML from JSON data include:1. Use libraries like Gson or Jackson

On certain pages dedicated to our API, such as for sales, we want to showcase JSON examples. We are looking for a nicely formatted display with color-coded spans. While the option of using the JavaScript code prettifier from this archived and unmaintaine ...

javahtmljson

Vuetify's offset feature seems to be malfunctioning as it does not

I'm facing an issue with the <v-flex> element in my code, specifically with the offset property not responding as expected. Despite following the recommended layout from the vuetify docs, I can't seem to get it right. Below you can see the ...

htmlcssvue.jsflexboxvuetify.js

Is it possible for me to include an ::after pseudo-element within a label that contains an input field?

I'm trying to create a clickable effect using CSS only with labels and inputs. However, I am struggling to replicate the same effect on my ::after pseudo-element without moving the input outside of the label. I attempted using flexbox order property b ...

htmlcss

Optimizing CSS With jQuery During Browser Resize

I am currently facing an issue with recalculating the height of the li element during window resizing or scrolling. Strangely, on page load, the height is no longer being re-calculated and set to the ul's child height. Here is the code I have written ...

javascriptjquerycss

Cache application

Experimented with the following code snippet from w3schools: Coding in index.html <!DOCTYPE html> <html manifest="demo_html.appcache"> <body> <script src="demo_time.js"></script> ...

htmlhtml5-appcache

Adjusting the content and style of a div element upon clicking, and restoring the original settings when clicked once more

There is a div with the id #increase-text-weight that displays the text "INCREASE TEXT WEIGHT". Upon clicking on it, the font weight of another div with the id #post-content should be changed to font-weight: 500 and the text inside #increase-text-weight s ...

javascriptjqueryhtmlcss

Differences between CSS Display None and Collapse

Can you explain the distinction between the following two options? display: none; visibility: hidden; I always thought that visibility: collapse was only applicable to tables. Am I mistaken? ...

htmlcss

Stop the stacking of 'display:table' specifically on Android devices

I have created a social media menu with several different links. It displays correctly in Chrome, Safari, Firefox, and Internet Explorer on iOS devices, but on Android devices, the icons stack horizontally: Here is the HTML code: <ul id="menu-social"& ...

androidhtmlcss

What is the best way to adjust the spacing between elements using CSS?

I am attempting to achieve this layout using CSS: The margin between each element is set to 10px. The height of the textarea is 100px and the width is 150px This snippet shows some HTML code for your reference: main form label { ...

cssmarginelement