Mask out (punch out) SVG shapes

[Siberian]

I'm attempting to mask out the circles with the gearMiddle, it is as straight forward as, what you want to mask out, you make black, what you want to keep you make white (punch out effect). How do I keep what is white to which I want to keep, visible; currently it's not visible ?

<mask> <path class="gearMiddle" d="M70,11.6C70,17.9,65.3,23,59.5,23c-1.5,0-2.9-0.3-4.2-1c0.3,0.2-7-3.2-13.4-3.2C36.1,18.7,26,23,23.5,23
    c-5.7,0-10.2-5.1-10.2-11.3c0-6.3,4.6-11.3,10.2-11.3c1.7,0,9.5,2.9,16.7,3.2c6.9,0.3,17.2-3.2,19.3-3.2C65.3,0.3,70,5.4,70,11.6z"
    fill="white" stroke="#4d5056" stroke-width=".83"/> <circle class="mCircleGearOne" cx="25.3" cy="11.3" r="6.2" /> <circle class="mCircleGearTwo" cx="58.6" cy="11.3" r="6.2" /> </mask> <path class="RGearLink" d="M82.4,20c-0.5,0.1-1,0.2-1.5,0.2H68c-0.7,0-1.4-0.1-2-0.3c2.4-1.9,4-5,4-8.6c0-3.6-1.6-6.7-4-8.6
    c0.6-0.2,1.3-0.3,2-0.3h12.9c0.5,0,1,0.1,1.5,0.2c-2.5,1.9-4.2,5.1-4.2,8.8C78.2,14.9,79.9,18.2,82.4,20z" fill="black" /> <path class="LGearLink" d="M17.1,20.4c-0.5,0.1-1,0.2-1.5,0.2H2.7c-0.7,0-1.4-0.1-2-0.3c2.4-1.9,4-5,4-8.6c0-3.6-1.6-6.7-4-8.6
    c0.6-0.2,1.3-0.3,2-0.3h12.9c0.5,0,1,0.1,1.5,0.2c-2.5,1.9-4.2,5.1-4.2,8.8C12.9,15.3,14.6,18.5,17.1,20.4z" fill="black"/> </svg> 

[rproffitt]

I can't find the <svg> tag to tinker with this in jsfiddle. Is this code incomplete?

[Siberian]

It's not the complete graphic, the complete graphic isn't required; add the <svg> tag between the <mask> tag and it should work.

[AndrisP]

All masks you need define in to <defs>. You can combine black and white filled masks to get hole or any other figure e.g.

<?xml version="1.0" encoding="UTF-8"?>
<!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" viewBox="0 0 500 200">
    <defs>
        <mask id="mask_1">
            <circle cx="100" cy="100" r="30" fill="white" />
            <circle cx="100" cy="100" r="10" fill="black" />
        </mask>
        <mask id="mask_2">
            <circle cx="400" cy="100" r="50" fill="white" />
            <circle cx="400" cy="100" r="30" fill="black" />
            <circle cx="400" cy="100" r="10" fill="white" />
        </mask>
    </defs>

    <rect x="0" y="0" width="500" height="200" fill="grey" />
    <circle cx="100" cy="100" r="50" fill="red" mask="url(#mask_1)" />
    <circle cx="400" cy="100" r="50" fill="green" mask="url(#mask_2)" />
</svg>

[Siberian]

Now you use <def> I understand it better; like <g> only with more flexibility.

I read you need to use, <use> to read the reference <def> file. Although I'm still unable to subtract one shape from another, I could have my black & whites in the wrong order ?

Class=gearMiddle needs to be solid (non-transparent) while, mCircleGearOne & mCircleGearTwo must be transparent or subtract a hole into Class=gearMiddle.

<defs>
       <mask id="one">
              <circle class="mCircleGearOne" cx="25.3" cy="11.3" r="6.2" fill="black"/>
              <circle class="mCircleGearTwo" cx="58.6" cy="11.3" r="6.2" fill="black"/>
              <path class="gearMiddle" d="M70,11.6C70,17.9,65.3,23,59.5,23c-1.5,0-2.9-0.3-4.2-1c0.3,0.2-7-3.2-13.4-3.2C36.1,18.7,26,23,23.5,23
              c-5.7,0-10.2-5.1-10.2-11.3c0-6.3,4.6-11.3,10.2-11.3c1.7,0,9.5,2.9,16.7,3.2c6.9,0.3,17.2-3.2,19.3-3.2C65.3,0.3,70,5.4,70,11.6z"
              fill="white" stroke="#4d5056" stroke-width=".83"/>
       </mask>
</defs>

<use xlink:href="#one" x="2" y="2" /> X & Y being position data obviously. Xlink is deprecated there doesn't seem to be an alternative besides <IRI> which doesn't appear good for testing purposes.

[AndrisP]

Sorry I am not clear what outcome you expect. Maybe put image examle.
In to the mask tags you can define white rect 100% width and 100% height as first shape and then define other (black) shapes to get holes. Over to black shape you can also define white shapes. My gear example:

<?xml version="1.0" encoding="UTF-8"?>
<!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" viewBox="0 0 200 200">
<defs>
    <circle id="circleGear" r="10" cx="100" cy="50" />
    <mask id="gear">
        <rect width="100%" height="100%" fill="white" />
        <use xlink:href="#circleGear" transform="translate(0 50)" />
        <g>
            <use xlink:href="#circleGear" transform="rotate(0 100 100)" />
            <use xlink:href="#circleGear" transform="rotate(45 100 100)" />
            <use xlink:href="#circleGear" transform="rotate(90 100 100)" />
            <use xlink:href="#circleGear" transform="rotate(135 100 100)" />
            <use xlink:href="#circleGear" transform="rotate(180 100 100)" />
            <use xlink:href="#circleGear" transform="rotate(225 100 100)" />
            <use xlink:href="#circleGear" transform="rotate(270 100 100)" />
            <use xlink:href="#circleGear" transform="rotate(315 100 100)" />
        </g>
    </mask>
</defs>

<rect x="0" y="0" width="200" height="200" fill="grey" />
<circle cx="100" cy="100" r="50" fill="red" mask="url(#gear)" />

</svg>

[Siberian]

I can't understand how you are creating the gear with the circles, when the circles don't have fill="black" applied to each circle ?

[AndrisP]

Black by default

[Siberian]

<defs>
  <mask id="chain">
  <path id="chainy" d="M70,11.6C70,17.9,65.3,23,59.5,23c-1.5,0-2.9-0.3-4.2-1c0.3,0.2-7-3.2-13.4-3.2C36.1,18.7,26,23,23.5,23
    c-5.7,0-10.2-5.1-10.2-11.3c0-6.3,4.6-11.3,10.2-11.3c1.7,0,9.5,2.9,16.7,3.2c6.9,0.3,17.2-3.2,19.3-3.2C65.3,0.3,70,5.4,70,11.6z"
    fill="white"/>
  </mask>
<circle class="LcircleChain" cx="25.3" cy="11.3" r="6.2"/>
<circle class="RcircleChain" cx="58.6" cy="11.3" r="6.2"/>
 </defs>

The #id chainy I want visible, while the other circle classes I want as by default, invisible. When attempt to load the #chainy

   <use xlink:href="#chainy" x="0" y="0" />

I don't see the circles within <def> invisible ?

[AndrisP]

Elements within <defs> is not visible - need linked.

<?xml version="1.0" encoding="UTF-8"?>
<!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" viewBox="0 0 200 200">
<defs>
    <mask id="chain">
        <rect width="100%" height="100%" fill="white" />
        <circle class="LcircleChain" cx="25.3" cy="11.3" r="6.2" fill="black" />
        <circle class="RcircleChain" cx="58.6" cy="11.3" r="6.2" fill="black" />
    </mask>
    <path id="chainy" d="M70,11.6 C70,17.9,65.3,23,59.5,23 c-1.5,0-2.9-0.3-4.2-1 c0.3,0.2-7-3.2-13.4-3.2 C36.1,18.7,26,23,23.5,23 c-5.7,0-10.2-5.1-10.2-11.3 c0-6.3,4.6-11.3,10.2-11.3 c1.7,0,9.5,2.9,16.7,3.2 c6.9,0.3,17.2-3.2,19.3-3.2 C65.3,0.3,70,5.4,70,11.6 z"
            fill="white" mask="url(#chain)" />
</defs>

<use xlink:href="#chainy" x="0" y="0" />

</svg>

or other way to get the same result

<!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" viewBox="0 0 200 200">
<defs>
    <mask id="chain">
        <path id="chainy" d="M70,11.6 C70,17.9,65.3,23,59.5,23 c-1.5,0-2.9-0.3-4.2-1 c0.3,0.2-7-3.2-13.4-3.2 C36.1,18.7,26,23,23.5,23 c-5.7,0-10.2-5.1-10.2-11.3 c0-6.3,4.6-11.3,10.2-11.3 c1.7,0,9.5,2.9,16.7,3.2 c6.9,0.3,17.2-3.2,19.3-3.2 C65.3,0.3,70,5.4,70,11.6 z"
            fill="white" />
        <circle class="LcircleChain" cx="25.3" cy="11.3" r="6.2" fill="black" />
        <circle class="RcircleChain" cx="58.6" cy="11.3" r="6.2" fill="black" />
    </mask>
</defs>

<rect x="0" y="0" width="120" height="60" fill="white" mask="url(#chain)" />

</svg>

[Siberian]

I understand. The first method I like although; neither is working in Codepen ?