在svg中有一个徽标。
我需要根据徽标下的主色将徽标的颜色更改为白色或黑色。
我试图为此目的使用插件BackgroundCheck。在一个干净的html插件中，它可以工作，但是当我加载它时Тильду，它就不起作用了。
在我看来，我的风格被忽视了。我究竟做错了什么？
<!--logo-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<head>
<style type="text/css" media="screen">
.images {
width: 100%;
display: block;
}
.fixed-nav {
/* background-color: red; */
position: fixed;
left: 100px;
top: 47px;
width: 80px;
z-index: 99999;
}
.fixed-nav.background--dark .fixed-nav-line {
/* background: #fff; */
}
.fixed-nav.background--dark .fixed-nav-logo {
background-image: url(https://static.tildacdn.com/tild3831-3566-4637-b934-383138346332/Awhite.svg);
height: 43px;
width: 33px;
/* fill: white; */
/* color: #fff; */
}
.fixed-nav.background--light .fixed-nav-logo {
background-image: url(https://static.tildacdn.com/tild6133-3534-4237-b863-666531326632/A.svg);
height: 43px;
width: 33px;
}
.fixed-nav-line,
.fixed-nav-logo {
background-image: url(https://static.tildacdn.com/tild6133-3534-4237-b863-666531326632/A.svg);
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
}
.fixed-nav-line {
width: 40px;
height: 3px;
background: #222;
}
.fixed-nav-logo {
/* background-color: yellow; */
width: 33px;
height: 43px;
font-size: 28px;
font-weight: bold;
text-align: center;
z-index: 99999;
}
</style>
<script src="https://hosting.maass.ua/background-check.min.js"></script>
<script src="https://hosting.maass.ua/fixed-nav.js"></script>
</head>
<body>
<!--<div class="fixed">-->
<div class="fixed-nav">
<a href="#">
<div class="fixed-nav-logo"></div>
</a>
</div>
<!--</div> -->
<div class="images">
<img class="images" src="https://static.tildacdn.com/tild6361-3535-4136-a662-353763663866/12049949b04d4882bcdf.jpg" />
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<img class="images" src="https://static.tildacdn.com/tild3837-6362-4139-b933-616635623530/maass-RO-hall-30.jpg" />
</div>
</body>
</html>PS也许还有其他方法可以解决我的问题？
提前致谢。
试试这样：
我最近遇到了类似的问题。我发现的唯一且非常有争议的实现选项需要连接tweenmax并复制徽标（在您的情况下）。另一个缺点 - 滚动时，不时会观察到抽搐。但是，我没有找到替代方案。
完成 - 见这里： https ://jsfiddle.net/xmoonlight/zatdu0v2/
这是代码的主要部分：
通过 CSS3 过滤器，如果您使用过滤器链，您可以获得可接受的结果。
将 SVG 徽标的颜色设置为黑色。如果是白色，则将 invert() 过滤器从 1 更改为 0。brightness() 过滤
器有助于减少徽标后面图像中具有强烈色差的颜色过渡波（60% 为 +/-10%） .
过滤器的顺序和样式的顺序非常重要！
演示：https ://jsfiddle.net/xmoonlight/7wgnxfsd/