5

Использую такую структуру svg:

<?xml version="1.0" encoding="iso-8859-1"?>
                <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 357 357" style="enable-background:new 0 0 357 357;" xml:space="preserve">
                <g>
                    <g id="arrow">
                        <polygon points="38.25,0 38.25,357 318.75,178.5" />
                    </g>
                </g>
            </svg>

Подключаю так:

<span class="arrow-svg">
  <svg>
     <use xlink:href="#arrow">
  </svg>
</span>

В стилях указываю размер и цвет. Не отображается.

Как правильно подключить svg в элементе через use? И как можно таким способом сделать маркеры списка?

1 ответ 1

6

Использование <use>:

К сожалению, этот способ не работает в IE, даже в 11 версии. Есть скрипт, который обрабатывает соответствующие ссылки для браузеров, где они не работают.

Будьте так-же осторожны: в Сhrome невозможно использовать фильтры на таких элементах. Пропадают и объекты с примененными фильтрами как изнутри так и на сам use элемент. Кроме того пропадают объекты с фильтрами из внешних файлов. Этот баг они не могут решить вот уже 5 лет

<svg height=0 >
   <g id="arrow">
         <polygon points="38.25,0 38.25,357 318.75,178.5" />
   </g>            
</svg>

Тест:

<svg>
    <use xlink:href="#arrow"/>
</svg>

Если svg во внешнем файле, нужно указать путь к нему:

<!-- `<use>` внутри документа -->
<svg viewBox="0 0 100 100">
   <use xlink:href="#icon-1"></use>
</svg>

<!-- `<use>` во внешнем файле-->
<svg viewBox="0 0 100 100">
   <use xlink:href="path/to/defs.svg#icon-1"></use>
</svg>

Использование <use> и стилизация CSS:

.marker use{
   fill:red;
}
<svg height=0 >
   <g id="arrow">
         <polygon points="38.25,0 38.25,357 318.75,178.5" />
   </g>            
</svg>

Тест:
<span class="marker">
<svg>
    <use xlink:href="#arrow"/>
</svg>
</span>

Использование <svg> как inline-изображение в CSS:

Есть более кроссплатформенный метод. Маркеры списка можно делать так:

.arrow {
  background: url('data:image/svg+xml,%3Csvg%20%20%20xmlns=%22http://www.w3.org/2000/svg%22%20%20%20viewBox=%22-2%20-2%2022%2044%22%20width=%2220%22%20height=%2240%22%3E%3Cpath%20d=%22M%2010,0%200,20%2010,40%22%20style=%22fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1%22%20/%3E%3Cpath%20d=%22M%2020,0%2010,20%2020,40%22%20%20%20%20style=%22fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1%22%20/%3E%3C/svg%3E');
  width: 20px;
  height: 40px;
}
<div class=arrow></div>

SVG закодирован через encodeURI:

console.log(encodeURI('<svg   xmlns="http://www.w3.org/2000/svg"   viewBox="-2 -2 22 44" width="20" height="40"><path d="M 10,0 0,20 10,40" style="fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /><path d="M 20,0 10,20 20,40"    style="fill:none;fill-rule:evenodd;stroke:#CCCCCC;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /></svg>'))

Полученное помещается в CSS таким образом:

 background: url('data:image/svg+xml,[код картинки]')
8
  • "элемент надо определять в <defs> а не где-то непонятно где:" суть в том, что я хочу разместить svg, например, в начале документа и, вызывать его в разных элементах по всей html странице. это возможно?
    – siberian
    31 мар 2017 в 10:28
  • @MarinaVoronova Протестировал, вставил код в ответ, тоже работает. Что-то у вас не так, может где-то ошибка
    – Crantisz
    31 мар 2017 в 10:40
  • а можно сделать маркеры списка инлайн стилем без кодировки? просто свг имеет другой цвет, я хочу иметь возможность задавать цвет в css
    – siberian
    31 мар 2017 в 11:10
  • @MarinaVoronova добавил в ответ
    – Crantisz
    31 мар 2017 в 11:17
  • спасибо, помогли разобраться. но маркеры не получилось сделать таким способом, придется картинкой наверное
    – siberian
    3 апр 2017 в 2:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.