Я закончил с использованием <object> и манипулирования его после того, как SVG было вынесено, таким образом, что помогло бы мне изменить стиль.

Для всех, кто интересуется более техническими деталями, я написал процесс here in my blog.

Я создал директиву в Angular для ее обработки, но, конечно, вам не нужно использовать Angular и использовать соответствующие части и использовать их, как вы хотите.

Редактировать: Написал беседка для него, вы можете получить его here.

источник

2015-07-02 09:55:38

ВАРИАНТ 1 - Использование общих стили CSS

Лично я создаю несколько цвета заливки и просто применить класс к SVG, где требуется.

HTML

<svg class="icon red"> 
    <use xlink:href="icon.svg#symbolid"></use> 
</svg>

CSS

.icon{ 
    fill:#000; 
} 
.red{ 
    fill:#b00; 
} 
.blue{ 
    fill:#ddf; 
}

ВАРИАНТ 2 - SVG была нацелена на уникальный класс

Если ваш svg имеет несколько путей, вы можете настроить таргетинг на каждый из них, используя другие классы.

HTML

<svg class="icon symbol"> 
    <use xlink:href="icon.svg#symbolid"></use> 
</svg>

CSS

.icon{ 
    fill:#000; 
    height:20px; 
    width:20px; 
} 
.symbol{ 
    height:40px; 
    width:40px; 
} 
.symbol .path1{ 
    fill:#b00; 
} 
.symbol .path2{ 
    fill:#ddf; 
}

ВАРИАНТ 3 - SVG в качестве фоновых изображений

DEMO

Чтобы использовать похожие изображения svg, они могут быть нацелены на css и даже использоваться в качестве фоновых изображений в css, но каждый символ svg должен быть уникальным файлом.

<div class="icon"></div> 

.icon{ 
    display:block; 
    height:20px; 
    width:20px; 
    background: url(icon.svg); 
    background-size: 20px 20px; 
}

Чтобы использовать SVG как разной высоты и ширины просто изменить в CSS, используя дополнительные классы для перезаписи по умолчанию, используя специфичность:

.svg40{ 
    height:40px; 
    width:40px; 
} 
.svg100{ 
    height:100px; 
    width:100px; 
}

ВАРИАНТ 4 - Встроенный SVGs (Моя рекомендация)

DEMO

Поместите файл svg непосредственно в свой html, чтобы уменьшить HTTP-запросы и улучшить контроль.

HTML

Место только после того, как ваше тело тега в верхней части HTML

<div style="height:0;width:0;position:absolute;visibility:hidden;"> 
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <symbol id="symbolid1" viewBox="0 0 64 64"> 
    <title>symbol 1</title> 
    <path ... /> 
    </symbol> 
    <symbol id="symbolid2" viewBox="0 0 64 64"> 
    <title>symbol 2</title> 
    <path ... /> 
    </symbol> 
</div>

Тогда вы можете вызвать от SVG в любом месте, используя идентификатор SVG в.

<svg class="icon"><use xlink:href="#symbolid"/></svg>

CSS

.icon{ 
    display:inline-block; 
    fill:currentColor; 
    width:20px; 
    height:20px; 
}

источник

2015-06-25 07:28:02 Obsidian

Да, так работает, и в настоящее время я использую его, но заметьте '# symbolid', что означает, что я должен использовать' 'в файле SVG. В любом случае, чтобы избежать этого? –

Да. Вот почему я решил использовать inline svg. Он чище и быстрее, поскольку он уменьшает количество HTTP-запросов в браузере. Чтобы ваш html был чистым во время кодирования, вы можете использовать пользовательский элемент управления областью шаблонов для хранения svg в другом месте вашего проекта. – Obsidian

Не ссылаясь на идентификатор символа, как бы вы указали, какой svg использовать? – Obsidian

Использование SVG и применение CSS из таблицы стилей

ответ

DEMO

DEMO

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