Preloader Script - Изменить цвет заливки SVG перед загрузкой страницы

Question

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

Вот мой скрипт:

jQuery(function($){
  document.querySelector(".svgicon").getSVGDocument().getElementById("loadericon").setAttribute("fill", "#FFF");
});

И мой HTML:

<object class="svgicon" type="image/svg+xml" data="'. get_template_directory_uri() . '/assets/images/preloaders/icon.svg'.'"
></object>

В файле icon.svg к тегу HTML добавлен идентификатор "loadericon".

Кто-нибудь может мне помочь с этим?

Answer 1

Да, вы должны быть в состоянии сделать это с атрибутом заполнения, например:

<button id="btnColor">change color</button><br>
<object id="svgContent" type="image/svg+xml" data="cat.svg#redcat"></object>

<script>
    var i = 0
    var colors = ["lime", "cyan", "red", "pink", "blue"]
    var object = document.querySelector("object");

    btnColor.addEventListener("click", function (e) {
        var svg = object.contentDocument.documentElement
        svg.getElementById("redcat").children[0].setAttribute('fill', colors[i])
        i = (i+1) % colors.length   
    })
</script>

Пока у вас нет проблем с CORS, вот рабочий пример:
https://raw.githack.com/heldersepu/hs-scripts/html/HTML/SVG/object.html

Теперь над этим примером я работаю с SVG-изображением, предоставленным @enxaneta, надеюсь, оно близко к вашему, если нет, то предоставьте ваше изображение.

Answer 2

Одним из вариантов будет использование атрибута target и ссылка только на часть SVG, а все остальное скрыто svg > svg:not(:target) {display: none;} Обратите внимание на URL для атрибута данных: cat.svg#redcat

object {  
display: inline-block;
margin:.5em;
width: 100px;
height: auto;
border:1px solid #d9d9d9;
}

<object type="image/svg+xml"
data="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat">
</object>

<object type="image/svg+xml"
data="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#blackcat">
</object>

SVG, который я использую, выглядит следующим образом.Обратите внимание на CSS внутри SVG.

<style type="text/css">
 <![CDATA[  
    svg > svg:not(:target) {
    display: none;
    }
     ]]> 
</style>
<desc>
<g id="cat">
<path id="cat_body" d="M121.506,108.953. . . z"/>
<path id="cat_head" d="M129.747,18.651. . . .z"/>
</g>
</desc>
<svg version="1.1" id="blackcat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 225">
<use xlink:href ="#cat" fill="black" />
</svg>
<svg version="1.1" id="redcat" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 225 225">
<use xlink:href ="#cat" fill="red" />
</svg>

Подробнее об этой технике вы можете прочитать в книге Использование SVG с CSS3 и HTML5: векторная графика для веб-дизайна глава 9: Новая точка зрения

ОБНОВЛЕНИЕ: В этом случае я использую кнопку, чтобы изменить цвет путей SVG. Вы можете использовать любое другое событие, которое вам нравится.

let data = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg";
let object = document.querySelector("object");

black.addEventListener("click", function changeColor(e){
   object.setAttribute('data', data +"#blackcat");
   let clone = object.cloneNode(true);
   let parent = object.parentNode;
   parent.removeChild(object );
   parent.appendChild(clone );
  
   e.currentTarget.removeEventListener(e.type, changeColor);
})

object,button {  
display: inline-block;
margin:.5em;
width: 100px;
height: auto;
border:1px solid #d9d9d9;
}

<div>
<object id="svgContent" type="image/svg+xml"
data="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat">
</object>
</div>
<p><button id="black">black cat</button></p>