Правильный размер фильтра SVG - PullRequest
Новая
       8

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

0 голосов
/ 09 января 2019

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

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

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

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

1 Ответ

0 голосов
/ 10 января 2019

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

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

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

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

...