预加载器脚本-在页面加载之前更改SVG填充颜色 [英] Preloader Script - Change SVG Fill Color Before Page Load
问题描述
我在预加载器中使用SVG图标.我想使用脚本更改图标填充的颜色.我有一个小问题,在关闭预加载器之前,颜色只会改变一小会儿.
I'm using SVG icon in the preloader. I want to change the color of the icon's fill using a script. I have a small problem, the color changes only for a short while before closing preloader.
这是我的剧本:
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文件中,将ID"loadericon"添加到HTML标记中.
In the icon.svg file there is added ID "loadericon" to the HTML tag.
有人可以帮我吗?
推荐答案
一个选项将使用target属性,并且仅隐藏一部分SVG,而其他所有内容均被隐藏svg > svg:not(:target) {display: none;}
请注意网址数据属性:cat.svg#redcat
One option would be using the target attribute and refer only to a part of the SVG while everything else is hidden svg > svg:not(:target) {display: none;}
Please pay attention to the url for the data attribute: 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如下所示.请注意SVG内部的CSS.
The SVG I'm using looks like this. Please note the CSS inside the 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>
您可以在第9章:新的观点
You can read more about this technique in the book Using SVG with CSS3 and HTML5: Vector Graphics for Web Design chapter 9: A New Point of View
更新:在这种情况下,我使用按钮来更改SVG路径的颜色.您可以使用任何您喜欢的其他事件.
UPDATE: In this case I'm using a button to change the color of the SVG paths.You may use any other event you like.
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>
这篇关于预加载器脚本-在页面加载之前更改SVG填充颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!