Can strokes be used as part of clip-paths in SVGs?

Question

I am in the middle of writing SVG output from MuPDF, and I've run up against what seems to be a limitation in the capabilities of SVG. I thought I'd ask here in case this was a known problem with a known workaround (or in case I'm doing something stupid!)

I have the following SVG:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="21.59cm" height="27.94cm" viewBox="0 0 600 600">
<path stroke-width="12" fill="none" stroke="#0000ff" d="M 150 300 L 80 300 L 80 370 L 150 370 " />
<clipPath id="cp0">
<path stroke-width="12" fill="none" stroke="#000000" d="M 150 300 L 80 300 L 80 370 L 150 370 " />
</clipPath>
<g clip-path="url(#cp0)">
<rect fill="#ff0000" x="0" y="0" width="600" height="600"/>
</g>
</svg>

This draws a stroked path (shaped like '[' in blue). Then it sets the same path to be a clipping path, and fills the clipping path in red.

I was hoping that the clipping path would be set to the stroked version of the path, and hence the red shape would exactly overwrite the blue one. In my tests here however, the "fill or strokedness" of the path is ignored, and the path is "filled" - hence I get a red square drawn within the blue shape.

Is there a way to get the behaviour I was hoping for? Or am I going to have to write code to manually flatten and stroke paths before outputting them to SVG?

Thanks in advance for any replies!

Answer 1

Clip-paths in svg are meant to be just the shape, not the traits of the shape, so in other words you'll not get the stroke included. What you can do is use a mask instead, setting the stroke of the path in the mask to white.

Here's an example:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 600 600">
  <defs>
    <mask id="m0" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="600">
      <path fill="none" stroke="white" stroke-width="5" d="M 150 300 L 80 300 L 80 370 L 150 370" />
    </mask>
  </defs>

  <path stroke-width="12" fill="none" stroke="#0000ff" d="M 150 300 L 80 300 L 80 370 L 150 370 " />
  <g mask="url(#m0)">
    <rect fill="yellow" x="0" y="0" width="600" height="600" />
  </g>
</svg>