CODEWITHSUNDEEP
htmlsvgpathmasking
icekomo
icekomo

Reputation: 9466

Why is the mask on SVG path not masking correctly?

I have an SVG with a path that I am trying to mask out.

I have a circle tag with an id of startCircle and a path with an id of startOrder. The circle one is working, the path is not, but I'm not sure why.

<svg id="wawa" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
            <style>
                .st0 {
                    fill: #fff
                }

                .st5 {
                    fill: #c32034
                }
            </style>

            <defs>
                <mask id="button-mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
                    <path d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="#fff" />

               </mask>

            </defs>
            <path id="endScreen" class="st0" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25"/>
            <path id="base" fill="none" stroke="#c1a88b" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" d="M6 374.88h326.27" />
            <path id="phoneOutline" d="M302.12 372.43V55.31c0-25.15-21.05-45.73-46.78-45.73H82.26c-25.73 0-46.78 20.58-46.78 45.73v317.13" fill="none" stroke="#c1a88b" stroke-width="7.358" stroke-linecap="round" stroke-miterlimit="10" />

            <path id="startOrder" class="st5" d="M236.62 337.2H99.44c-6.6 0-12-5.4-12-12v-20.48c0-6.6 5.4-12 12-12h137.17c6.6 0 12 5.4 12 12v20.48c.01 6.6-5.39 12-11.99 12z" mask="url(#button-mask)" />
            <circle id="startCircle" cx="110" cy="110" r="100" fill="#9c6" mask="url(#button-mask)" />

        </svg>

I set up a pen to show what I am talking about

codepen

Upvotes: 0

Views: 442

Answers (1)

ccprog
ccprog

Reputation: 21821

The answer is in the TweenMax library you are including:

TweenMax.set( '#startOrder',{x:"+=100"});

This moves the #startOrder 100 px to the right by setting a

transform="matrix(1,0,0,1,100,0)"

Transforms are applied after masks (they are always the last operation), and before the translation the path lies completely within the mask shape.

You can solve this by moving the path inside a group and applying the mask to the group:

<g mask="url(#button-mask)">
    <path id="startOrder" ... />
</g>

Upvotes: 1

Related Questions