Тень SVG обрезана? Проверьте фильтр и область просмотра

Обрезанная тень SVG может упираться в две разные границы. Область фильтра ограничивает место вычисления эффекта; затем область просмотра SVG или родительский контейнер может обрезать отрендеренный результат. Сначала увеличьте область фильтра. Если тень все еще заканчивается у края изображения, проверьте область просмотра и правила обрезки.

Не нужно повторно трассировать SVG с целыми контурами. Это руководство меняет рабочую область эффекта и видимый холст, сохраняя тот же оригинальный силуэт.

Две границы, один неизменный контур

Мы вручную создали маленький силуэт и открыли три версии в браузере. Каждая использует тот же контур и настройки feDropShadow: dx="22", dy="18" и stdDeviation="12". Снимок ниже показывает реальный рендеринг в браузере, а не конвертацию PerfectVector.

В первой версии область фильтра идет от (50, 50) до (210, 180). Это оставляет жесткую границу справа и снизу тени. Во второй область расширяется от (-20, -20) до (300, 280), но SVG все еще показывает только 0 0 240 220. Теперь правый край тени доходит до рамки области просмотра и обрезается там.

Третья версия сохраняет большую область фильтра и меняет viewBox на -20 -20 320 300. Ее width и height также становятся 320 и 300, поэтому во всех трех демонстрациях одна единица SVG равна одному CSS-пикселю. Дополнительное пространство вмещает видимую тень без изменения размера контура.

Расширьте область фильтра в правильной системе координат

Атрибуты <filter> x, y, width и height определяют область. Их значения по умолчанию — -10%, -10%, 120% и 120%: некоторый запас уже есть, но его может не хватать для конкретного смещения и размытия. MDN описывает эти значения.

Проверьте filterUnits перед изменением чисел:

• objectBoundingBox, значение по умолчанию, трактует область относительно ограничивающей рамки фильтруемого элемента. Процентный запас зависит от размеров фигуры.
• userSpaceOnUse позволяет задать область в текущей пользовательской системе координат элемента, ссылающегося на фильтр. Это удобно, когда координаты графики известны.

Эти правила относятся к области, как описано в справочнике filterUnits. Они не меняют автоматически единицы смещения или размытия тени.

primitiveUnits управляет длинами внутри примитивов фильтра. По умолчанию это userSpaceOnUse; мы задали его явно, чтобы 22, 18 и 12 сохраняли это значение. Переключение на objectBoundingBox изменило бы трактовку чисел. MDN отделяет единицы примитивов от единиц области фильтра.

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

Дайте место и области просмотра SVG

Сохраните полный пример как shadow.svg и откройте в браузере. Это точный SVG третьего состояния, также проверенный как самостоятельный файл:

<svg xmlns="http://www.w3.org/2000/svg" width="320" height="300" viewBox="-20 -20 320 300" overflow="hidden">
  <defs>
    <filter id="shadow" filterUnits="userSpaceOnUse"
      primitiveUnits="userSpaceOnUse" x="-20" y="-20" width="320" height="300">
      <feDropShadow dx="22" dy="18" stdDeviation="12"
        flood-color="#152b34" flood-opacity="0.7"/>
    </filter>
  </defs>
  <path d="M 60 160 L 60 100 Q 60 60 100 60 L 200 60 L 200 120 Q 200 170 150 170 L 70 170 Q 60 170 60 160 Z" fill="#078875" filter="url(#shadow)"/>
</svg>

viewBox имеет четыре значения: минимальные x и y, ширину и высоту. Он отображает этот прямоугольник пользовательских координат в область просмотра SVG. Увеличение его размеров при прежних отображаемых ширине и высоте уменьшает видимую графику, а не добавляет место в макете за пределами элемента. MDN объясняет отображение viewBox.

Чтобы воспроизвести два сбоя, измените в копии примера только эти значения:

1. Для среднего состояния оставьте фильтр прежним, но задайте корню width="240", height="220" и viewBox="0 0 240 220".
2. Для первого состояния сохраните эту меньшую область просмотра и также задайте фильтру x="50", y="50", width="160" и height="130".
3. Восстановите полный пример и сравните правый и нижний края. Данные контура никогда не меняются.

Если весь рисунок вне холста, следуйте более широким проверкам пустого SVG. Если рисунок виден, но размеры меняются при импорте, проверьте связь единиц SVG и размера перед изменением геометрии.

Почему overflow помогает встроенному SVG, но может не решить проблему файла

Пример явно задает overflow="hidden", чтобы граница области просмотра была воспроизводимой. Для встроенного SVG overflow="visible" может убрать обрезку областью просмотра. Он не восстановит пиксели, уже отброшенные областью фильтра, а предок с собственной обрезкой все равно может скрыть результат. CSS также может переопределить атрибут представления SVG. Справочник overflow SVG описывает эти правила обрезки.

Проверьте реальный способ встраивания. Встроенный SVG на просторной странице, самостоятельный SVG и SVG через HTML-элемент изображения по-разному взаимодействуют с окружающим макетом. Наш снимок трех состояний использует элементы изображений и дает исправленному файлу достаточно внутреннего места на холсте. Используйте этот подход для передачи SVG как самостоятельного изображения: включите эффект в нужные границы, затем откройте именно этот файл в целевом приложении.

Если отдельно он выглядит правильно, но обрезается внутри карточки, проверьте overflow, обрезку и маски карточки. Если сбой только в конкретном редакторе или экспортере, сравните упрощенную копию и изучите поддержку фильтров этим приложением. Руководство по изменению внешнего вида SVG описывает эту отдельную проблему импортера.

Сохраните геометрию и восстановите эффект отдельно

Отрендеренная тень добавляет оформление контуру, а не превращает размытие в еще один редактируемый контур. Храните оригинал SVG с исходной геометрией. Для резки проверяйте границы контуров отдельно: видимая тень — не дополнительная линия реза.

Если исходник существует только в PNG или JPG, PerfectVector поможет восстановить геометрию SVG перед добавлением эффекта. Преобразуйте графику без тени в вектор, затем проверьте внешний контур, зазоры и нежелательные фигуры фона в редакторе. Добавьте там тень и проверьте границы описанным способом.

Используйте исходник без записанного в пикселях размытия, если он есть. Трассировка сведенного изображения не восстановит исходные настройки фильтра и не докажет, где дизайнер задумал конец чистого силуэта. Для простого знака без чистого исходника ручная перерисовка может быть более управляемой. Обзор векторизации изображений объясняет, что восстанавливает трассировка.

Проверьте передаваемый файл

Откройте сам экспортированный SVG, а не только холст редактора. Подтвердите, что нужная тень помещается в конечном размере и итоговый файл по-прежнему содержит нужные контуры. Проверьте также реальную веб-страницу или целевое приложение: окружающая обрезка или неподдерживаемый фильтр могут вернуть симптом.

Не оставляйте огромную область фильтра стандартным исправлением. Область намного больше необходимой усложняет понимание файла и все равно не исправляет внешнюю границу обрезки. Используйте осознанный запас, храните исходник без фильтра и проверяйте снова после изменения размытия или смещения.

Частые вопросы

Почему тень все еще обрезана после увеличения ширины фильтра? Область просмотра SVG, родительский контейнер, контур обрезки или маска могут задавать другую границу. Проверьте x и y фильтра вместе с шириной и высотой, затем найдите, с чем совпадает оставшаяся граница обрезки.

Меняет ли filterUnits радиус размытия? filterUnits управляет системой координат области фильтра. primitiveUnits управляет длинами внутри примитивов фильтра, включая смещение и размытие тени. Разделяйте их при диагностике файла.

Можно ли исправить обрезку повторной векторизацией SVG? Если SVG уже содержит пригодные контуры, исправьте область фильтра или просмотра. Векторизация нужна раньше для растрового исходника; она не восстанавливает исходные параметры тени.

Источники

1. MDN: filter element — Определяет элемент фильтра и запас его области по умолчанию.
2. MDN: filterUnits — Объясняет координаты ограничивающей рамки и пользовательского пространства области фильтра.
3. MDN: primitiveUnits — Отличает длины примитивов от внешней области фильтра.
4. MDN: viewBox — Описывает отображение пользовательских координат в видимую область просмотра SVG.
5. MDN: overflow — Описывает обрезку области просмотра, значения встроенного SVG по умолчанию и приоритет CSS.

Начинаете с растрового силуэта? Подготовьте контуры SVG с PerfectVector, сначала проверьте восстановленную границу, затем добавьте тень и снова откройте конечный SVG для проверки обеих границ.