是什么导致这个 SourceAlpha 比 SourceGraphic 大

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%；尝试更改<rect> 上width 和height 的值，黑色背景将是原始框周围输入宽度/高度的10% 的边框

那么是什么导致SourceAlpha 变大，我如何实际调整黑色背景的大小，以便获得我想要的大小？

PS：我非常不想在当前的<rect> 上放置另一个filter，就像我在这里一样。

Answer 1

默认情况下，过滤器区域的所有边都大 10%。这是为了允许像 feGaussianBlur 这样可以使图形更大的过滤器基元。

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

我推荐阅读section on filters in the SVG spec。

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

我能想到的只有一种方法可以在不添加额外元素的情况下使点击区域变大。

• 为形状赋予较大但不可见的笔触宽度
• 设置pointer-events="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>