Svg bezier path stroke width not working with mask

Andrei Roba

I want to hide part of a path using a mask, but when i apply the mask the stroke width no longer applies, any ideas what's wrong and how to make it work?

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>

*when you remove the mask above rendering works correctly

ccprog

You are not setting any attributes on the <mask> element. This means defaults are used:

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

The object bounding box does not take the styling of the path into account, but only the path geometry. Here is what inspection with Javascript will tell you:

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

Since the height of its bounding box is 0.5, the height of the offscreen buffer used to render the mask is 0.6, everything outside is cut off.

You need to define an area large enough to contain everything you want the mask to apply to.

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.