Нанесение контура на маску в SVG - PullRequest
Новая
       12

Нанесение контура на маску в SVG

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

Можно ли нанести контур или что-то на маску, чтобы вы могли увидеть, где находится маска? У меня есть элемент, который я пытаюсь замаскировать, но на самом деле я не вижу, выравнивается ли он там, где должен.

То, что я пытаюсь сделать, это использовать идентификатор endScreen в качестве маски и использовать идентификатор startOrder для маскируемого объекта. Правильно, это не маскировка, но не правильно, и было бы неплохо увидеть маску в дизайне. 

<svg id="demo" 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" width="1" height="1">
                     <path d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="white" />
                </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" />
            <circle id="startScreen" class="st0" cx="167.67" cy="199.37" r="91" />
            <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" />
            <circle id="speakerSmall" cx="204.78" cy="43.04" r="4.4" fill="#c1a88b" />
            <path id="speakerLarge" fill="none" stroke="#c1a88b" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M132.04 43.23h59.45" />
            <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)" />
            <path id="star" class="st5" d="M168.66 91.97l4.94 10.01 11.04 1.6-7.99 7.79 1.89 11.01-9.88-5.2-9.89 5.2 1.89-11.01-7.99-7.79 11.05-1.6z" />
            <circle id="endOrder" cx="165.72" cy="313.53" r="36.5" fill="#89bd40" />
            <path id="check" fill="none" stroke="#fdfeff" stroke-width="7" stroke-miterlimit="10" d="M147.32 255.76l12.88 11.5 23.93-23.46" />
        </svg>

1 Ответ

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

Определите путь, который вы хотите использовать для маски, сначала как сам шаблон, без какого-либо атрибута представления, а затем дважды на него ссылайтесь: сначала внутри маски с fill="white", а затем снова с fill="none" stroke="blue" сверху от вашего графика.

Вы заметите, что ваш путь не закрыт, но очевидно, что заливка создаст неявное закрытие между конечными точками, которое штрих не показывает. Простое решение, которое практически ничего не меняет для вашей маски, - это добавить команду z в конце определения пути. 

.st0 {
    fill: #fff
}

.st5 {
    fill: #c32034
}
<svg id="demo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 337.32 386.57">
    <defs>
        <path id="shape" d="M51.24 372.52V52.27c0-15.4 12.6-28 28-28h180.79c15.4 0 28 12.6 28 28v320.25" fill="white" />
        <mask id="button-mask" width="1" height="1">
             <use href="#shape" fill="white" />
        </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" />
    <circle id="startScreen" class="st0" cx="167.67" cy="199.37" r="91" />
    <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" />
    <circle id="speakerSmall" cx="204.78" cy="43.04" r="4.4" fill="#c1a88b" />
    <path id="speakerLarge" fill="none" stroke="#c1a88b" stroke-width="9" stroke-linecap="round" stroke-miterlimit="10" d="M132.04 43.23h59.45" />
    <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)" />
    <path id="star" class="st5" d="M168.66 91.97l4.94 10.01 11.04 1.6-7.99 7.79 1.89 11.01-9.88-5.2-9.89 5.2 1.89-11.01-7.99-7.79 11.05-1.6z" />
    <circle id="endOrder" cx="165.72" cy="313.53" r="36.5" fill="#89bd40" />
    <path id="check" fill="none" stroke="#fdfeff" stroke-width="7" stroke-miterlimit="10" d="M147.32 255.76l12.88 11.5 23.93-23.46" />
    <use href="#shape" fill="none" stroke="blue" />
</svg>

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

...