Фильтр SVG для маскировки фигуры в Safari не рендеринг - PullRequest
1 голос
/ 29 августа 2011

Я использую маску, чтобы вырезать круг из моей фигуры SVG.Я собираюсь получить эффект прожектора с заостренным краем, поэтому я использую фильтр размытия по Гауссу для достижения этого в Firefox и Chrome, но по какой-то причине я не могу заставить Safari отрисовать фильтр.Может ли это иметь какое-либо отношение к форме фигуры в определении маски?Я читал, что Webkit раньше требовал установки флага для включения фильтров SVG.Может ли это быть?

Вот определение фильтра:

<defs>
    <filter id="blur_alpha" x="-1" y="-1" width="100" height="100" filterUnits="objectBoundingBox">
        <feGaussianBlur result="blur_alpha_blur" in="SourceAlpha" stdDeviation="10"/>
    </filter>
</defs>

Вот SVG, реализующий его:

<svg version="1.1" width="360" height="515" viewBox="0 0 360 515">
    <defs>
        <mask id="circle_mask0" x="0" y="0" width="360" height="515" maskUnits="userSpaceOnUse">
            <rect x="0" y="0" width="360" height="515" stroke-width="0" fill="white" opacity="0.8"/>
            <circle cx="514" cy="492" r="129.6" stroke-width="0" fill="black" opacity="1" filter="url(#blur_alpha)"/>
        </mask>
    </defs>
    <rect x="0" y="0" width="360" height="515" stroke-width="0" mask="url(#circle_mask0)" opacity="1"/>
</svg>

Я уже пытался определить фильтр втот же SVG, смена блоков фильтра и т. д. Вот ссылка, чтобы увидеть его.Попробуйте это в Chrome / Firefox, а затем в Safari: soundandtheshadow.com

Обновление

Осматривая другие приложения фильтров SVG в Safari, я заметил, что никаких фильтров не былорендеринг.Видимо, это ошибка в моей версии Safari, я отправил отчет об ошибке через браузер.Если у кого-то есть лучший совет, как привлечь к этой проблеме больше внимания, пожалуйста, дайте мне знать.Я оставлю вопрос открытым, если у кого-то есть обходной путь!

1 Ответ

1 голос
/ 19 ноября 2011

Это не ошибка. Фильтры SVG просто не реализованы (или, скорее, они созданы без поддержки фильтров в Webkit) в текущей версии Safari.

Эта таблица может быть полезна для вас: http://caniuse.com/svg-filters

UPD : На момент вручения ответа Safari 6 (который поддерживает фильтры SVG) на некоторое время отсутствует.

...