Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.12.2016, 00:09
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Как лучше подключать SVG объект
Добрый день уважаемые, задался вопросом поключения SVG элементов сгенерированных в векторных рисовалках к HTML. Надеюсь вы посоветуете, что-то хорошее по этому поводу.
1)Опущу прямое подключение, когда код из .svg копипастится в html. Метод хорош, но если надо вставлять множество однотипных объектов, то очень захламляет html разметку.
2)Ещё на форумах встречал вызов svg через свойство css
background: url('example.svg') no-repeate 50% 50%;

вроде как все объекты svg сводятся в один фаил, а там позиционированием выбирается нужный, если не ошибаюсь называется svg-span.
Вот даже образец с анимацией http://codepen.io/sdras/pen/azEBEZ
Я его пробовал, тоже с анимацией игрался, у меня почему-то не очень хорошо вышло.
3) Ещё один метод это обращение к элементу через html в сокращенном виде:
<div class="svg_circle">
	<object>
		<embed src="Circle.svg">
	</object>
</div>

а там уже в svg файле дописывать свойста
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 283.3 285.6" style="enable-background:new 0 0 283.3 285.6;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#B049B4;stroke:#420447;stroke-width:4;}
</style>
<g>
	<circle id="elips" class="st0" cx="147.9" cy="147.2" r="125"/>
</g>
</svg>

Плюс в этом методе я вижу что элемент можно подгонять через CSS и JS.
Единственное что у меня почему-то выдает ошибку в браузер при множественных запросах и работе через JS, хоть и отрабатывает
*Буду благодарен если подскажете как решить.

И теперь главный вопрос, как же все таки наиболее грамотно добавлять SVG в фаил?
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить ссылку на объект, содержащий DataURL? ssadfaf Общие вопросы Javascript 0 19.01.2015 11:20
svg - как включить текст к rect, circle и т.п.? eugen35 (X)HTML/CSS 0 25.08.2014 20:28
Как получить в JQUERY каждую строку как отдельный объект? Alex1233 Общие вопросы Javascript 3 22.08.2014 06:54
Как получить json объект? light Общие вопросы Javascript 7 28.07.2014 17:14
хотел как лучше, а получилось как всегда. Вопрос оптимизации 9xakep Общие вопросы Javascript 13 21.01.2013 17:27