是什麼原因導致這比SourceGraphic

Question

我試圖讓下面的方框更大SourceAlpha有一個更大的點擊區域：

<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這樣的過濾器基元，它可以使圖形更大。

您可以通過使用屬性x，y，在<filter>元素width和height改變濾鏡效果的區域。它們分別默認爲-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>