主页 / 问题 / 1585037
Accepted
eccs0103
Asked:2024-06-24 17:41:11 +0000 UTC2024-06-24 17:41:11 +0000 UTC

掩码在特定线路上正常工作

  • 772

描述

我正在尝试创建一个我的图标。用这样的代码...

<svg width="32" height="32" viewBox="-16 -16 32 32" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="circle-clip">
            <rect x="-16" y="-16" width="64" height="64" fill="white" />
            <circle r="2" cx="-2" cy="-2" fill="black" />
        </mask>
    </defs>
    <line x1="-11" y1="0" x2="11" y2="0" stroke="#151515" stroke-linecap="round" />
    <line x1="0" y1="-11" x2="0" y2="11" stroke="#151515" stroke-linecap="round" />
    <line x1="-7" y1="-7" x2="7" y2="7" stroke="#151515" stroke-linecap="round" />
    <line x1="7" y1="-7" x2="-7" y2="7" stroke="#151515" stroke-linecap="round" />
    <circle r="7" cx="0" cy="0" fill="#151515" mask="url(#circle-clip)" />
</svg>

...结果是这样的：

现在，为了去除切出的圆形部分中的线条，我在它们上使用与大圆圈相同的蒙版。如果我在对角线
上使用蒙版，那么一切都会正常：

<svg width="32" height="32" viewBox="-16 -16 32 32" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="circle-clip">
            <rect x="-16" y="-16" width="64" height="64" fill="white" />
            <circle r="2" cx="-2" cy="-2" fill="black" />
        </mask>
    </defs>
    <line x1="-11" y1="0" x2="11" y2="0" stroke="#151515" stroke-linecap="round" />
    <line x1="0" y1="-11" x2="0" y2="11" stroke="#151515" stroke-linecap="round" />
    <line x1="-7" y1="-7" x2="7" y2="7" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <line x1="7" y1="-7" x2="-7" y2="7" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <circle r="7" cx="0" cy="0" fill="#151515" mask="url(#circle-clip)" />
</svg>

如果我在非对角线上使用遮罩，它们会完全消失：

<svg width="32" height="32" viewBox="-16 -16 32 32" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="circle-clip">
            <rect x="-16" y="-16" width="64" height="64" fill="white" />
            <circle r="2" cx="-2" cy="-2" fill="black" />
        </mask>
    </defs>
    <line x1="-11" y1="0" x2="11" y2="0" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <line x1="0" y1="-11" x2="0" y2="11" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <line x1="-7" y1="-7" x2="7" y2="7" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <line x1="7" y1="-7" x2="-7" y2="7" stroke="#151515" stroke-linecap="round" mask="url(#circle-clip)" />
    <circle r="7" cx="0" cy="0" fill="#151515" mask="url(#circle-clip)" />
</svg>

据我了解，我正确配置了掩码......

问题

为什么会发生这种情况？
如何修复它？

svg

1 个回答

  1. Best Answer

    我在 Chromium bug 跟踪器中找到了这张票，看起来这是具有空边界框的对象的某种特定情况。

    maskUnits="userSpaceOnUse" x="-16" y="-16"可以在面具处询问。

    或者您可以简单地将所有元素分组并在组上放置蒙版。

    <svg width="320" height="320" viewBox="-16 -16 32 32" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <mask id="circle-clip">
        <rect x="-16" y="-16" width="64" height="64" fill="white" />
        <circle r="2" cx="-2" cy="-2" fill="black" />
      </mask>
    </defs>
    <g mask="url(#circle-clip)">
      <line x1="-11" y1="-0" x2="11" y2="0" stroke="#151515" stroke-linecap="round" />
      <line x1="0" y1="-11" x2="0" y2="11" stroke="#151515" stroke-linecap="round" />
      <line x1="-7" y1="-7" x2="7" y2="7" stroke="#151515" stroke-linecap="round" />
      <line x1="7" y1="-7" x2="-7" y2="7" stroke="#151515" stroke-linecap="round" />
    <circle r="7" cx="0" cy="0" fill="#151515" />
    </g>
</svg>

    • 2

相关问题