时间戳

首页 > 解决方案 > 在 SVG 中的蒙版上放置轮廓

html - 在 SVG 中的蒙版上放置轮廓

问题描述

是否可以在面具上画出轮廓或其他东西，以便您可以真正看到面具在哪里？我有一个我试图掩盖的元素，但我实际上看不到它是否排列在它应该的位置。

我要做的是使用 endScreen ID 作为掩码，并将 startOrder ID 用于被掩码的对象。不是它在掩盖它，但不是正确的，能够明显地看到它在设计中的面具会很好。

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

标签： htmlsvgmasking

解决方案

首先将要用于蒙版的路径定义为模板本身，不带任何表示属性，然后引用它两次：首先，在蒙版内部，使用fill="white"，然后再次使用fill="none" stroke="blue"on top off your grafic。

你会注意到你的路径没有关闭，但显然填充会在端点之间创建一个隐式关闭，而笔画没有显示。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>

可能值得注意的是，这只是适合您特定情况的解决方案。如果蒙版定义了笔画，则不能像那样显示围绕该笔画的另一笔画。实际上，该技术更适合剪辑路径（即纯形式）而不是蒙版（其是任意图形结构）。

推荐阅读