Trouble with stroke width in Svg bezier path while using a mask

I'm having trouble hiding part of a path using a mask. When I apply the mask, the stroke width doesn't seem to work anymore. Any suggestions on why this is happening and how to fix it?

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
<svg viewBox="600 200 400 400">
  <defs>
      <linearGradient id="g1">
          <stop stop-color="#205ee2" offset="0%"></stop>
          <stop stop-color="#749af8" offset="100%"></stop>
      </linearGradient>

      <mask id="m1">
          <rect x="600" y="200" width="400" height="400" fill="white"></rect>
          <circle fill="black" r="141" cy="406" cx="904"></circle>
      </mask>
  </defs>

  <path d="M 610 406 C 757.25 406, 757.25 406.51, 904.5 406.5" fill="transparent" stroke-opacity="0.4" stroke-width="30" mask="url(#m1)" stroke="url(#g1)"></path>
</svg>

*if the mask is removed, the rendering works correctly.

htmlcsssvg

Answer №1

No attributes are being set on the <mask> element, so default values are being used:

<mask id="m1" maskUnits="objectBoundingBox" x="-10%" y="-10%" width="120%" height="120%">

The object bounding box only considers path geometry, not styling. An inspection with JavaScript reveals:

 > document.querySelector('path').getBBox()
 > SVGRect { x: 610, y: 406, width: 294.5, height: 0.500152587890625 }

With a bounding box height of 0.5, the offscreen buffer's height for the mask is 0.6, cutting off everything outside.

To address this, you should define an area large enough to encompass all elements affected by the mask.

svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
<svg viewBox="600 200 400 400">
  <defs>
      <linearGradient id="g1">
          <stop stop-color="#205ee2" offset="0%"></stop>
          <stop stop-color="#749af8" offset="100%"></stop>
      </linearGradient>

      <mask id="m1" maskUnits="userSpaceOnUse" x="600" y="200" width="400" height="400">
          <rect x="600" y="200" width="400" height="400" fill="white"></rect>
          <circle fill="black" r="141" cy="406" cx="904"></circle>
      </mask>
  </defs>

  <path d="M 610 406 C 757.25 406, 757.25 406.51, 904.5 406.5" fill="transparent" stroke-opacity="0.4" stroke-width="30" mask="url(#m1)" stroke="url(#g1)"></path>
</svg>

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

Experiencing problems with jQuery drop-down menus - added arrows to menu links, but menu disappears when arrows are hovered over

My website has a drop-down menu implemented using jQuery, and it works well. However, I'm facing an issue where I want to add an arrow to the links that have sub-menus. The problem is that when you hover over this arrow, technically you're not ho ...

jqueryhtmlcsswordpress

Display the form-control field only when a selection has been made in the previous form-control using HTML and PHP

I'm in the process of developing a webpage with form controls (2 in this example). Here's my code: <body> <div class="option_choice_global"> Select your options <div class="col-xs-2"> <lab ...

phphtmlform-control

Ways to activate a button action with jQuery even when it is disabled and clicked

Thank you for the responses. To clarify my goal, I want the form button to submit all select field responses for processing through php on the next page. If a user clicks the submit button before selecting an option in each field, it should display "whoa d ...

javascriptjqueryhtmlajaxvalidation

Invoking getJSON() repetitively within a loop inside another getJSON() call, within a new row specifically

Although I am not well-versed in JS, I have a feeling that I might be incorrect in the way I am handling this situation. The general idea here is to query the database for a list of items; then within the initial loop, create a row in the table by using th ...

jqueryhtmljsoninternet-explorer-8

Issues with the display property

After setting the display of a div tag as none in the style property, I am trying to show it based on an on-click function. However, the issue I am facing is that when I click on the function, the div displays for a brief moment then disappears again. Ca ...

javascriptjqueryhtml

Customizing the appearance of the file input type using an image in HTML and CSS

Can you provide guidance on utilizing the image below? Is there an alternative approach to using: <input type="file" /> ...

htmlcssimageuploadstyling

Instead of modifying the selected class, jQuery generates inline styles

Utilizing the following code to dynamically create a class: $("head").append('<style type="text/css"></style>'); var newStyleElement = $("head").children(':last'); newStyleElement.html('.move{transform: translateX(1 ...

javascriptjqueryhtmlcss

What causes the discrepancy in pixel size between these two web pages on the same device?

I am currently putting together a portfolio showcasing the projects I have worked on while learning to code. Each project page has a banner at the top, but I'm encountering an issue with one site (Jubilee Austen page) that is unresponsive. After usin ...

htmlcssresponsive-designpixel

Is it possible to have a hidden div box within a WordPress post that is only visible to the author of the

How can I create a div box with "id=secret" inside a post that is only visible to the author of the post? I initially made it for the admin, but now I want the id to be visible exclusively to the post's author. For instance: If the author is curren ...

javascripthtmlcsswordpressprivacy

Mastering the art of curating the perfect image for your Facebook timeline

Controlling the Like image presented on Facebook timeline can be done using the header element. In my single-page app, I have multiple like buttons, each should be connected to a different image. What is the best way to associate a specific image with e ...

javascripthtmlfacebook-graph-apifacebook-javascript-sdk

Reduce the length of selection choices in the dropdown menu of WebForms

In my WebForms project, I have created a drop-down list by binding a list of data with 'Title' and 'Id' to it. Ddltitlelist.DataSource = submissionTitleList; Ddltitlelist.DataTextField = "Submission_Title"; Ddltitlelist.DataValueField ...

htmlcssasp.netdrop-down-menuwebforms

Locating the xpath of an element directly beneath the opening <body> tag

I'm having trouble finding the xpath for an element that is not associated with any html tags. Please see the attached image for reference. I tried using driver.findElement(By.xpath("/html/body/"));, but it's not working. I need to locate the tex ...

htmlseleniumxpath

What is preventing me from renaming a file in PHP when passed through jQuery?

Hello to all users! I've encountered an issue where I can't seem to change the file name in PHP that is being passed from jQuery: Here is the JavaScript code where I pass the file to the PHP handler: var url = '/temp.php'; var xhr = ...

javascriptphphtmljquery

Struggling to click on a link while viewing the site on your mobile device?

Recently dove into the world of implementing mobile responsive design for a website I've been working on. While conducting some testing, I observed that the main tabs which direct users to different sections of the site, normally easy to click on desk ...

htmlcssangularjsmobile

How can one use Selenium to verify the existence of an element on a webpage?

Currently, I am developing a program in Selenium with Python and facing an issue. During the test execution, there is a possibility that a button may or may not appear on the webpage based on an unknown parameter. The relevant HTML tag for this button is ...

pythonhtmlselenium-webdriver

Stop the removal of the CSS content property

When a user enters and re-enters their password, I have a form that checks the strength of the password and displays text accordingly. However, I noticed that if a user makes a mistake and uses the backspace to re-enter the password, the text from data-tex ...

javascripthtmlcsscss-selectorspseudo-element

Removing dropdown lists from input forms can be achieved without using jQuery by utilizing vanilla JavaScript

Looking to build a custom HTML/JavaScript terminal or shell. Interested in utilizing an input box and form to interact with JavaScript functions/commands. Unsure of how to eliminate the drop-down menu that appears after previous inputs. Pictured terminal: ...

javascriptjqueryhtml

Harness the power of Ionic by utilizing the same HTML template across various pages, while easily customizing the content

I need help with streamlining my Ionic app that has multiple pages with similar HTML structures but different content. Is there a way to use just one HTML file and dynamically fill in the content? Should I use a controller for each page, or is there a more ...

javascripthtmlangularjsionic-framework

The justify-content property is failing to properly align content along the main axis in Grid layout

I've implemented tailwind for my CSS styling. Within a simple div, I have 3 child elements. My goal is to create space between them along the main axis. Here's the code snippet in question: <div className="grid grid-cols-12 text-white ju ...

htmlcssnext.jstailwind-csstailwind-ui

Arrangement of elements on a page

I may not be an HTML pro, but I'm curious to find out how I can determine if one element is near another in a web page. For example, how can I tell if a div is close to another div, or if a table is adjacent to an image or another table? ...

html