Question

我试图让以下方框有更大的可点击区域：

<svg width="150" height="150">
  <rect x="10.5" y="10.5" width="10" height="10"
        stroke="black" stroke-width="3" fill="none"/>
</svg>

所以要做到这一点，我用滤镜搞砸了一下;首先我应用了一个颜色矩阵，然后我想开始改变黑色背景部分的大小，但它已经不知何故已经比原始图形更大了：

<svg width="150" height="150">
  <filter id="fillBlack">
    <feColorMatrix type="matrix" in="SourceAlpha" result="blackBox"
        values="0 0 0 0 0
                0 0 0 0 0
                0 0 0 0 0
                1 1 1 1 1"/>
    <feComposite operator="over" in="SourceGraphic" in2="blackBox"/>
  </filter>
  <rect x="50" y="50" width="10" height="10" filter="url(#fillBlack)"
        stroke="transparent" stroke-width="50" fill="white"/>
</svg>

现在，这似乎已经非常接近我想要的结果了，但是有两个问题：首先，我真的不明白为什么这会起作用，其次，因为我不知道是什么导致这个，我无法调整黑色背景。

看起来背景总是大10％;尝试更改width上height和<rect>的值，黑色背景将是原始框周围输入宽度/高度的10％的边框

那么是什么原因导致SourceAlpha更大，我如何实际调整黑色背景的大小，以便我可以拥有我想要的尺寸？

PS：我非常不愿意将另一个<rect>放在当前的filter之上，而是像我在这里所做的一样{{1}}。

Answer 1

默认情况下，滤镜区域的四周都要大10％。这是为了允许像feGaussianBlur这样的过滤器原语，它可以使图形更大。

您可以使用x元素上的属性y，width，height和<filter>更改过滤效果区域。它们分别默认为-10％， - 10％，120％和120％。

我建议您阅读section on filters in the SVG spec。

但即使过滤器可以导致某些东西被拉大，也不应该改变响应指针事件的区域的实际大小或形状。

我只能想到一种方法，你可以使用它来增加点击区域而不增加额外的元素。

赋予形状大而不可见的笔触宽度
设置pointer-events="all"

将指针事件设置为“all”会使笔划和填充区域敏感，即使它们不可见。比较此示例中方块的行为。

rect:hover {
   fill: orange;
}

<svg width="350" height="200">
  
  <rect x="50" y="50" width="100" height="100" fill="red"/>
  
  <rect x="200" y="50" width="100" height="100" fill="green"
        stroke="black" stroke-opacity="0" stroke-width="40" pointer-events="all"/>

</svg>

是什么导致这个更大的SourceAlpha而不是SourceGraphic

1 个答案: