Что вызывает это больше 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% больше; попробуйте изменить значения для width и height на <rect>, а черный фон будет граница 10% вводимый ширина/высота вокруг оригинальной коробке

Так что заставляет SourceAlpha быть больше, и как я на самом деле изменить размер черного фона, чтобы я мог иметь его размер, который я хочу?

PS: Я бы предпочел не ставить другой <rect> поверх текущего, но я бы сделал все, что сделал с filter, как у меня здесь.

Answer 1

По умолчанию площадь фильтра на 10% больше по бокам. Это позволяет использовать примитивы фильтров, такие как feGaussianBlur, которые могут сделать графику больше.

Вы можете изменить область фильтра эффектов, используя атрибуты x, y, width и height на <filter> элемента. По умолчанию они равны -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>