Подключить svg в элементе через use

327

02 апреля 2017, 02:03

Использую такую структуру 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? И как можно таким способом сделать маркеры списка?

Answer 1

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

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

<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,[код картинки]')

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Отслеживание элемента навигации

Выбираю пункт меню, затем возвращаюсь наверх, на главную - пункт меню остается выделеннымПрошу вас помочь с решением отслеживания пунктов...

246

HTML

Подключить svg в элементе через use

Отслеживание элемента навигации

Выравнивание. Верстка блока новостей

Не работает путь файла ErrorDocument

Нужно организовать поиск по сайту asp.net mvc