Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.08.2017, 15:02
Аспирант
Отправить личное сообщение для Sokoljr Посмотреть профиль Найти все сообщения от Sokoljr
 
Регистрация: 27.06.2016
Сообщений: 68

SVG элементы path
Добрый день

У меня есть прелоадер

<div id="page-preloader">
        <div class="logo">
            <object id="logoSvg" name="logo" type="image/svg+xml" data="img/logo-webcap.svg" width="100%" height="100%"></object>
        </div>
        <div id="content">
            <span class="spinner"></span>
        </div>
    </div>


файл object имеет такой вид

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="webcapLogoAnimate" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="-164 388.3 199.8 67.3" style="enable-background:new -164 388.3 199.8 67.3;" xml:space="preserve">
	 <style>
	 	.st0 {
	 		fill: #000000;
	 		transition: all .3s ease-in-out;
	 	}
	 </style>
<g>
	<g>
		<path class="st0" d="M9.4,403.9L9,404.4c-0.4-0.4-0.7-0.5-1.1-0.5c-0.2,0-0.4,0.1-0.6,0.2S7,404.4,7,404.6c0,0.2,0.1,0.3,0.2,0.5
			c0.1,0.2,0.4,0.3,0.8,0.6c0.5,0.3,0.9,0.5,1,0.8c0.2,0.2,0.3,0.5,0.3,0.8c0,0.4-0.2,0.8-0.5,1.1s-0.7,0.5-1.1,0.5
			c-0.3,0-0.6-0.1-0.9-0.2c-0.3-0.1-0.5-0.3-0.7-0.6l0.4-0.5c0.3,0.4,0.7,0.6,1.1,0.6c0.3,0,0.5-0.1,0.7-0.3s0.3-0.4,0.3-0.6
			c0-0.2-0.1-0.4-0.2-0.5c-0.1-0.1-0.4-0.3-0.9-0.6c-0.5-0.2-0.8-0.5-1-0.7c-0.2-0.2-0.3-0.5-0.3-0.8c0-0.4,0.1-0.7,0.4-1
			c0.3-0.3,0.6-0.4,1-0.4C8.4,403.2,8.9,403.5,9.4,403.9z"/>
		<path class="st0" d="M11.2,401.4h0.7v2H13v0.6h-1.1v4.7h-0.7V404h-0.9v-0.6h0.9V401.4z"/>
		<path class="st0" d="M13.9,403.4h0.7v2.5c0,0.6,0,1,0.1,1.3c0.1,0.3,0.3,0.6,0.6,0.8c0.3,0.2,0.6,0.3,1,0.3c0.4,0,0.7-0.1,1-0.3
			c0.3-0.2,0.4-0.4,0.6-0.7c0.1-0.2,0.1-0.6,0.1-1.3v-2.6h0.7v2.6c0,0.7-0.1,1.3-0.3,1.7c-0.2,0.4-0.4,0.7-0.8,0.9
			c-0.3,0.2-0.8,0.3-1.3,0.3c-0.5,0-1-0.1-1.3-0.3c-0.3-0.2-0.6-0.5-0.8-0.9c-0.2-0.4-0.3-0.9-0.3-1.7V403.4z"/>
		<path class="st0" d="M25.3,401.3v7.4h-0.7v-0.9c-0.3,0.3-0.6,0.6-1,0.8c-0.4,0.2-0.7,0.3-1.2,0.3c-0.8,0-1.4-0.3-1.9-0.8
			s-0.8-1.2-0.8-2c0-0.8,0.3-1.4,0.8-2c0.5-0.5,1.2-0.8,1.9-0.8c0.4,0,0.8,0.1,1.2,0.3c0.4,0.2,0.7,0.5,0.9,0.8v-3h0.8V401.3z
			 M22.6,403.9c-0.4,0-0.7,0.1-1.1,0.3c-0.3,0.2-0.6,0.4-0.8,0.8c-0.2,0.3-0.3,0.7-0.3,1.1c0,0.4,0.1,0.7,0.3,1.1
			c0.2,0.3,0.4,0.6,0.8,0.8c0.3,0.2,0.7,0.3,1,0.3c0.4,0,0.7-0.1,1.1-0.3c0.3-0.2,0.6-0.4,0.8-0.8c0.2-0.3,0.3-0.7,0.3-1.1
			c0-0.6-0.2-1.1-0.6-1.5C23.7,404.1,23.2,403.9,22.6,403.9z"/>
		<path class="st0" d="M27.1,401.2c0.2,0,0.3,0.1,0.4,0.2c0.1,0.1,0.2,0.2,0.2,0.4c0,0.2-0.1,0.3-0.2,0.4c-0.1,0.1-0.2,0.2-0.4,0.2
			s-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.2-0.2-0.4c0-0.2,0.1-0.3,0.2-0.4C26.8,401.2,27,401.2,27.1,401.2z M26.8,403.4h0.7v5.3h-0.7
			V403.4z"/>
		<path class="st0" d="M31.4,403.2c0.8,0,1.5,0.3,2,0.9c0.5,0.5,0.7,1.2,0.7,1.9s-0.3,1.4-0.8,1.9c-0.5,0.6-1.2,0.8-2,0.8
			s-1.5-0.3-2-0.8c-0.5-0.6-0.8-1.2-0.8-1.9s0.2-1.4,0.7-1.9C29.9,403.5,30.6,403.2,31.4,403.2z M31.4,403.9c-0.6,0-1.1,0.2-1.5,0.6
			s-0.6,0.9-0.6,1.5c0,0.4,0.1,0.7,0.3,1.1c0.2,0.3,0.4,0.6,0.8,0.8c0.3,0.2,0.7,0.3,1,0.3c0.4,0,0.7-0.1,1-0.3s0.6-0.4,0.8-0.8
			c0.2-0.3,0.3-0.7,0.3-1.1c0-0.6-0.2-1.1-0.6-1.5C32.5,404.1,32,403.9,31.4,403.9z"/>
	</g>
	<path class="st0" d="M-116.1,446.5c-0.6-0.6-1-2.1-0.1-3c5.4-5.3,21.8-8.6,42.6-7.7c2,0.1,7.7,0.7,8.7,0.8c4,0.4,11.2,1.7,12.4,2.1
		c-3.1-0.4-14-1.1-14-1.1c-2.3-0.1-4.4-0.2-6.3-0.2c-22.1-0.5-37.9,4.2-40.7,8.3c-0.4,0.6,0,1,0,1.1c0.8,0.6,1.7,1,2.1,1.1
		C-112.4,447.8-114.9,447.8-116.1,446.5z"/>
	<path class="st0" d="M-106.6,424.6c8.4-9.9,17.2-23.5,17.2-30.3c0-0.7-0.1-1.4-0.3-1.9c-0.2-0.5-0.7-0.7-1.3-0.7
		c-1.2,0-2.7,0.6-3,0.8c0.8-0.6,3.2-2.3,4.8-2.4c1.6,0,2.9,0.8,3.3,1.8c0.2,0.7,0.4,1.4,0.4,2.3c0,7.7-10.7,22.1-20.4,32.4
		c-6.8,7.3-12.9,12.1-15.1,12.4c-2.9,0.4-3.8-1.5-3.8-3.3c0-8.2,8.6-22.7,12.2-27.8c-5.9,4-30.8,27.2-30.8,31.5
		c0,0.1,0.3,0.2,0.5,0.2c0.2,0,0.4,0,0.6-0.1c0,0-0.4,0.9-1.4,0.9c-0.9,0-2.1-1-2.1-1.7c0-6.1,20.9-36.6,20.9-42.4
		c0-2.3-2.2-2.7-4.2-2.7c-12,0-30.2,20-30.2,22.9c0,0.6,0.1,1,1.3,1c1,0,1.5-0.4,1.5-0.2c0,0.3-2.1,1.4-3.2,1.4
		c-2.2,0-2.9-1.9-2.9-3c0-7.6,21.6-23.5,32.9-23.5c4,0,7.6,1.9,7.6,6c0,8.6-11.9,25.4-15.9,32.1c8.3-10.6,27.8-28.5,30-28.5
		c1.3,0,4.2,2,4.4,3.2c-0.5-0.4-1.1-0.3-1.3-0.3c-2.8,0-20.3,33.2-16.4,32.7C-118.7,437-112.9,432-106.6,424.6z"/>
	<path class="st0" d="M-96.1,429.4c0,0.6,0.4,0.9,1.4,0.9c3.5,0,12.3-6.7,17.1-10.7c0.1-0.1,0.5,0.1,0.3,0.3
		c-3.4,3.3-13,12.5-19.4,12.5c-1.5,0-3.4-1.7-3.4-3c0-1.2,0.3-2.1,0.7-3.2c1.2-2.7,3.6-5.8,6.6-8.3c4-3.3,8.3-4.8,10.3-4.8
		c0.7,0,2.9,1.1,2.9,2.4c0,3-9.2,9.9-14.6,10C-95,426.6-95.9,428.1-96.1,429.4z M-93.5,424.6c4.2-0.5,12.1-8.3,12.4-10.1
		C-86.4,416.3-91.9,422.1-93.5,424.6z"/>
	<path class="st0" d="M-76.3,423.5c3.7-4.6,12.2-11.1,14.8-10.2c0.6,0.2,2.3,2.1,2.3,2.7c0,4.3-9.3,16-15.9,16c-1.9,0-4-1.2-4-2.8
		c0-0.2,0.2-0.3,0.2-0.2c0,0.5,0.9,1.4,1.8,1.4c4.8,0,13.6-12.8,14-15.2c-0.8,0-10.4,5-15.4,12.3c-1.4,2-3.4,4.8-1.2,5
		c-0.6,0.2-1.1,0-1.5-0.2c-0.4-0.1-1.4-1.2-1.7-1.9c-0.1-0.4,0-1.8,1.3-5c2.7-6,8.6-14.7,13.6-21.3c1.7-2.3,3.6-4.6,5.8-6.4
		c0.8-0.5,1.4-0.9,1.8-0.9c2.7,0,4.6,2.8,3.6,2.3c-1.3-0.7-3.5,1.4-6.4,5.1C-68,410.2-72.6,416.4-76.3,423.5z"/>
	<path class="st0" d="M-57.4,430.3c4.4-0.5,12.5-7,17.1-10.8c0.1-0.1,0.5,0.1,0.3,0.2c-4.1,3.9-13.4,12.6-19.3,12.6
		c-1.5,0-3.3-1.4-3.5-3c0-0.4,0-0.9,0.1-1.4c0.4-2,2.1-5.4,5.3-8.5c3.9-3.9,8.8-6.4,12.2-6.4c1.1,0,2.7,1.6,2.7,2.4
		c0,1.8-2.4,3.6-3.9,4.8c-0.1,0.1-0.3,0-0.2-0.1c0.8-0.8,2.7-4.6,2.4-4.9c-5.1,0.1-14.5,10.9-14.5,14.3
		C-58.8,430.3-57.9,430.4-57.4,430.3z"/>
	<path class="st0" d="M17.4,413.3c0.3-0.2,0.6-0.3,0.7-0.3c1.1,0,2.9,1.9,2.9,3.1c0,0.1-0.1,0-0.5-0.1c-0.7-0.1-2.4,1.9-3.9,3.8
		c-0.6,0.8-2.7,3.7-2.7,3.7c4.2-4.6,13.2-11.1,15.6-10.3c0.6,0.2,2.3,2.1,2.3,2.8c0,4.3-9.4,15.8-16,15.8c-1.9,0-4.1-1.2-4.1-2.8
		c0-0.2,0.2-0.3,0.2-0.2c0,0.5,0.8,1.4,1.8,1.4c4.8,0,13.5-12.4,14.1-15.1c-0.7,0-8.4,3.8-16.8,12.6c-4.7,6.7-11.4,16.9-12.6,24
		c-0.2,1.2-0.2,2.2,0.9,2.3c-2.2,0.9-4.4-0.9-4-3.8c1-8.1,10.6-23.1,17.9-32.5C14.6,416.3,16.5,414.1,17.4,413.3z"/>
	<path class="st0" d="M-17.5,419.9c-1.4,1.4-9.6,9.2-13.2,9.2c-1.1,0-1.9-1.7-1.9-2.8c0-5.9,12.3-14.9,18.5-14.9
		c1.7,0,4.1,0.7,4.1,2.9c0,0.8-0.4,1.6-0.9,2.2c0,0-0.1,0-0.1-0.1c0.2-0.4,0.5-0.9,0.5-1.6c0-1.3-0.9-2.2-2.3-2.2
		c-5.5,0-14,8.4-16.1,14.2c3-1.3,8.4-5,10.9-7.5c0.7-0.7,3.6-3.9,4.7-3.9c1.1,0,2.5,1,2.5,1.8c0,1.1-7,7.5-7,11
		c0,0.5,0.1,0.8,0.8,0.8c7,0,16.2-13,16.2-21.1c0-5.6-4.8-8.1-10.3-8.1c-12.3,0-28.2,14.6-28.6,27.9c-0.2,7.2,5.5,10.6,12.6,10.6
		c19.2,0,43.3-19.6,43.3-18.9c0,1-25.9,21.7-44,21.7c-9,0-15.8-4.4-15.4-13.8c0.6-14.7,18.6-28.3,32.1-28.3c6.5,0,13.6,2.3,13.6,9.6
		c0,10.6-13.2,21.4-20.2,21.4c-2.2,0-3.1-1.6-3.1-2.5C-20.8,425.2-19.4,422.3-17.5,419.9z"/>
</g>
</svg>


через JS я хочу выцепить через цикл все path и присваивать им разные fill

при поиске мне выбивает object, дальше не могу пролезть во внутрь

var fillMode = $('#logoSvg');
    console.log(fillMode);


http://prntscr.com/g77emv

заранее спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 11.08.2017, 18:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,984

Sokoljr,
$(window).on("load",function() {
   var data = $('#logoSvg')[0].getSVGDocument();
   var path = data.querySelectorAll('path');
   [].forEach.call(path, function(el) {
          el.style.fill = "#" + ("000000" + (Math.random() * 0xffffff | 0).toString(16)).slice(-6)
   });
});
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Необходимо присвоить id всем элементам path в SVG AndreySt Общие вопросы Javascript 5 16.05.2016 17:33
Как перерисовать все элементы SVG на Canvas (d3.js+leaflet.js+html2canvas) Trippal Общие вопросы Javascript 0 10.02.2016 17:25
SVG CSS, SVG to WOFF kobezzza Firefox/Mozilla 2 29.03.2013 13:59
Inline SVG as background Paguo-86PK Элементы интерфейса 0 16.12.2011 18:12
SVG: background для Path debugx Общие вопросы Javascript 1 05.11.2011 05:28