Mask out (punch out) SVG shapes

Question

Siberian 13 Junior Poster

7 Years Ago

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>

3 Contributors
10 Replies
700 Views
3 Days Discussion Span
Latest Post 7 Years Ago Latest Post by Siberian

rproffitt 2,662 "Nothing to see here."

7 Years Ago

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

AndrisP 193 Posting Pro in Training

7 Years Ago

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>

AndrisP 193 Posting Pro in Training

7 Years Ago

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>

Edited 7 Years Ago by AndrisP

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Siberian 13 Junior Poster · Answer 1 · 2017-06-01T21:05:55+00:00

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

Siberian 13 Junior Poster · Answer 2 · 2017-06-03T01:26:13+00:00

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.

Siberian 13 Junior Poster · Answer 3 · 2017-06-03T11:36:18+00:00

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 193 Posting Pro in Training · Answer 4 · 2017-06-03T19:20:45+00:00

AndrisP 193 Posting Pro in Training

7 Years Ago

Black by default

Siberian 13 Junior Poster · Answer 5 · 2017-06-04T02:06:22+00:00

<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 193 Posting Pro in Training · Answer 6 · 2017-06-04T13:32:41+00:00

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 13 Junior Poster · Answer 7 · 2017-06-04T18:38:28+00:00

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