Question

是否可以在蒙版上放置轮廓或其他内容，以便您可以实际看到蒙版的位置？我有一个要遮罩的元素，但实际上看不到是否要对齐。

我想做的是使用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>

Answer 1

首先自己定义要用作模板的路径，不带任何presentation属性，然后再对其进行两次引用：首先，在模板内部使用router.post('/addprod', mid.reqAdmin, function(req, res, next) { if(req.fields.category && req.fields.name && req.fields.price && req.fields.description && req.files) { // ... } else { // ... } });，然后再次使用{{1 }}最重要。

您会注意到路径没有闭合，但显然填充将在端点之间创建隐式闭合，但笔划不会显示。一种简单的解决方案，可以有效地对掩码进行任何更改，只需在路径定义的末尾添加一个fill="white"命令即可。

fill="none" stroke="blue"

可能值得注意的是，这是仅适合您特定情况的解决方案。如果遮罩定义了笔划，则不能像这样显示另一个笔划（ around ）。实际上，该技术比蒙版（任意的任意层状结构）更适合剪切路径（纯格式）。

在SVG中的蒙版上放置轮廓

1 个答案: