Почему маска на пути SVG не маскируется правильно? - PullRequest
Новая
       14

Почему маска на пути SVG не маскируется правильно?

0 голосов
/ 02 ноября 2018

У меня есть SVG с путем, который я пытаюсь замаскировать.

У меня есть круговой тег с идентификатором startCircle и путь с идентификатором startOrder. Круг один работает, пути нет, но я не уверен почему. 

<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>

Я установил ручку, чтобы показать, о чем я говорю

codepen

1 Ответ

0 голосов
/ 02 ноября 2018

Ответ находится в библиотеке TweenMax, которую вы включаете: 

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

Это перемещает #startOrder 100 px вправо, устанавливая 

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

Преобразования применяются после масок (они всегда являются последней операцией), а перед преобразованием путь полностью лежит в форме маски.

Вы можете решить эту проблему, переместив путь внутри группы и применив маску к группе: 

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