Где разместить внешний файл svg для ссылки на CSS?

Я пытаюсь ссылаться на фильтры SVG из CSS. Оба являются внешними.Где разместить внешний файл svg для ссылки на CSS?

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

В соответствии с этим link, он должен работать, если svg происходит из «того же источника», что и html. Я не совсем понимаю, что означает «то же происхождение».

Моя структура каталогов: index.html \ CSS

Я пытался все это без успеха:

положить файл SVG на корню с индексом
, а также в CSS directory
с использованием URL-адреса пути (css/test.svg # LightItUp);
положить CSS-рядный таким образом: {#LightItUp фильтр: URL (CSS/test.svg # LightItUp);}

Содержание SVG:

<svg width="500" height="262" viewBox="0 0 200 150" > 
<defs> 
    <filter id="LightItUp" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="420"> 

    <!-- Apply a uniform blur of the 
     alpha channel --> 
    <feGaussianBlur in="SourceAlpha" 
    stdDeviation="3" result="blur"/> 
    </filter> 
</defs> 
</svg>

Содержание CSS:

.logo { filter: url(test.svg#LightItUp); }

Любая помощь будет оценена

источник

2014-01-20 Mindgnosis

Моя догадка заключается в том, что проблема заключается в идентификаторе фрагмента (#LightItUp), который больше не поддерживается в css-фоновом режиме в некоторых браузерах, возможно, он не работает и в фильтрах. –

-1

Добавить это похоже на нормальное изображение

<object data="your.svg" type="image/svg+xml"> 
    <img src="yourfallback.jpg" /> 
</object>

источник

2014-01-28 11:13:50 Magnum26

Спасибо за предложение, но фильтр по-прежнему не применяется – Mindgnosis

Где разместить внешний файл svg для ссылки на CSS?

ответ

Смежные вопросы