2014-11-28 7 views
0

По какой-то причине стрелки svg на моем скользком слайдере не отображаются в Интернете. Отлично работает на моем рабочем столе, а затем, когда я загружаюсь на ftp, это не так. Файл svg был предоставлен, и я даже повторно сохранил и заменил его, но безрезультатно. Есть идеи?Slippry slider svg стрелки не отображаются

http://threeriversahec.org

HTML сценарий:

<!-- SLIPPRY SLIDESHOW SCRIPT --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script src="slippry/dist/slippry.min.js"></script> 
<link rel="stylesheet" href="slippry/dist/slippry.css"> 
<link rel="stylesheet" href="style.css"> 

slippry/расстояние /> CSS скрипт:

slippry/расстояние/активы /> Файл .SVG

.sy-controls li a:after { 
    content: ""; 
    background-image: url(assets/arrows.svg); 
    background-repeat: no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    text-align: center; 
    text-indent: 0; 
    line-height: 2.8em; 
    color: #111; 
    font-weight: 800; 
    position: absolute; 
    background-color: #fff; 
    width: 2.8em; 
    height: 2.8em; 
    left: 50%; 
    top: 50%; 
    margin-top: -1.4em; 
    margin-left: -1.4em; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    -ms-border-radius: 50%; 
    -o-border-radius: 50%; 
    border-radius: 50%; 
} 

ответ

2

Ваши стрелы. Файл svg подается с неправильным типом Content-Type/MIME. Если вы посмотрите на вкладку «Сеть» ваших инструментов браузера dev, вы увидите, что она используется как «text/html». Это должно быть «image/svg + xml». Вам необходимо настроить свой веб-сервер так, чтобы он обслуживал SVG-файлы с правильным типом. Как вы это делаете, зависит от того, какой веб-сервер вы используете.

+0

Спасибо! Я знал, что он должен быть серверным. –

1

Другим обходным решением является сохранение файла arrows.svg в виде PNG-файла с прозрачностью (я использовал Illustrator) и замену всех вхождений «arrows.svg» на «arrows.png» в файле CSS Slippry.

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