Правильный размер фильтра svg

Я использую очень простое размытие по Гауссу в svg:

<filter id="filter2" x="-10%" y="-10%" width="120%" height="120%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
</filter>

Этот эффект в основном имеет ширину 15 пикселей с каждой стороны (после этого размытие становится слишком слабым). Как правильно закодировать это в размере фильтра (x, y, ширина, высота), чтобы я мог повторно использовать фильтр для произвольных элементов? В частности, у меня есть несколько маленьких кругов (около 10 пикселей в ширину) и несколько больших многоугольников (несколько сотен пикселей в ширину). x и y достаточно просто, я могу просто установить их на -15. Однако проблема с width и height. 120% недостаточно для маленьких элементов и слишком много для больших. Я конвертирую svg в pdf, и это приводит к огромным полям.

В идеале я хочу установить что-то вроде 100% + 15px. Есть ли способ добиться этого?


svg svg-filters
person Artificial Mind    schedule 09.01.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы не можете использовать гибридные размеры непосредственно в объявлении размера вашего фильтра (пока - это возможно с SVG2 - не уверен). Сегодня вы должны выбрать либо %, либо абсолютные единицы (objectBoundingBox или userSpaceOnUse), поэтому вам нужно определить несколько фильтров с разными размерами, если вы хотите переполнение фиксированного размера для фигур разных размеров. По крайней мере, это не слишком большой лишний вес документа.

Один из вариантов — просто использовать поля фильтра по умолчанию (+/- 10% по всему периметру) и изменить размер на % для стандартного отклонения следующим образом:

<filter id="filter2" primitiveUnits="objectBoundingBox">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3%"/>
</filter>

Это создаст размытие переменного размера в абсолютном выражении, но вам понадобится только одно объявление фильтра.

person Michael Mullany    schedule 10.01.2019