SVG-фильтр на пути с userSpaceOnUse и большой областью фильтра, мой путь все еще обрезается

Question

Я использую SVG-фильтр, который хочу использовать на путях. Так как мой путь может быть прямым, я использую userSpaceOnUse для блока фильтра. Чтобы убедиться, что путь не обрезается, я должен убедиться, что область моего фильтра достаточно велика.

<svg width="200px" height="200px" viewbox="0 0 200 200">
  <defs>
    <filter filterUnits="userSpaceOnUse" id="dark" x="0" y="0" width="200" height="200">
      <feColorMatrix type="matrix" values="0.2 0 0 0 0, 0 .2 0 0 0, 0 0 0.2 0 0, 0 0 0 1 0" />
    </filter>
  </defs> 
  
  <path transform="translate(100,100)" d="M3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,-3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,3.989422804014327,0" transform="translate(0,12)" fill-opacity="0.4" fill="hsl(207,59%,56%)" stroke="hsl(207,59%,56%)" filter="url(#dark)" stroke-width="1" stroke-opacity="1" />
  
  <path d="M 10 10 H 90 V 90 H 10 L 10 10" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>
  
  <path d="M 10 10 H 90 V 90 H 10 L 10 10" transform="translate(100,100)" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>

</svg>

Фильтр применяется к трем путям: два квадрата и круг. Однако круг обрезается.

Если я использую objectBoundingBox, круг отображается полностью. Однако это не вариант, потому что я также хочу использовать фильтр на прямых линиях, которые не имеют размеров.

Если я поиграюсь с x и y фильтра, например -10 для обоих например, он также отлично работает.

Что-то не так с моей областью фильтра? Насколько я понимаю, он полностью охватывает SVG, поэтому все, что использует фильтр, не должно быть обрезано. Или это случай использования, не поддерживаемый userSpaceOnUse, которого я не знаю?

Answer 1

измените перевод на (0,0) вместо (100,100), чтобы увидеть, как фигура сходит с холста.

<svg width="200px" height="200px" viewbox="0 0 200 200">
  <defs>
    <filter filterUnits="userSpaceOnUse" id="dark" x="0" y="0" width="200" height="200">
      <feColorMatrix type="matrix" values="0.2 0 0 0 0, 0 .2 0 0 0, 0 0 0.2 0 0, 0 0 0 1 0" />
    </filter>
  </defs> 
  
  <path transform="translate(0,0)" d="M3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,-3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,3.989422804014327,0" transform="translate(0,12)" fill-opacity="0.4" fill="hsl(207,59%,56%)" stroke="hsl(207,59%,56%)" filter="url(#dark)" stroke-width="1" stroke-opacity="1" />
  
  <path d="M 10 10 H 90 V 90 H 10 L 10 10" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>
  
  <path d="M 10 10 H 90 V 90 H 10 L 10 10" transform="translate(100,100)" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>

</svg>

Перевод его не меняет того, что он нарисован выше и слева от области фильтра. Мы могли бы переместить фильтр, изменив его значения x и y, чтобы исправить это ...

<svg width="200px" height="200px" viewbox="0 0 200 200">
  <defs>
    <filter filterUnits="userSpaceOnUse" id="dark" x="-10" y="-10" width="200" height="200">
      <feColorMatrix type="matrix" values="0.2 0 0 0 0, 0 .2 0 0 0, 0 0 0.2 0 0, 0 0 0 1 0" />
    </filter>
  </defs> 
  
  <path transform="translate(100,100)" d="M3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,-3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,3.989422804014327,0" transform="translate(0,12)" fill-opacity="0.4" fill="hsl(207,59%,56%)" stroke="hsl(207,59%,56%)" filter="url(#dark)" stroke-width="1" stroke-opacity="1" />
  
  <path d="M 10 10 H 90 V 90 H 10 L 10 10" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>
  
  <path d="M 10 10 H 90 V 90 H 10 L 10 10" transform="translate(100,100)" fill-opacity="0.4" stroke="hsl(207,59%,56%)" filter="url(#dark)" fill="hsl(207,59%,56%)" stroke-width="1" stroke-opacity="1"/>

</svg>