Question

我的徽标是一个SVG文件，我使用echo file_get_contents()在我的页面上输出。当用户向下滚动页面时，其颜色需要更改。我应该使用两个版本的SVG文件（其中设置了两种不同的颜色）或使用JS动态更改颜色？这两种解决方案中哪一种被最广泛接受？

Answer 1

这是一个基本的JS示例：

<!DOCTYPE HTML>
<html>
<head>
  <title>Logo Scroll</title>
</head>
<body>
<div id=myDiv style=width:100px;height:1000px;background:gainsboro>
 <svg width=100 height=100>
 <circle id=myLogo fill="red" stroke="none" cx=50 cy=50 r=30 />
</svg>
</div>
<script>
document.onscroll=function()
{
if(window.pageYOffset>10)
    myLogo.setAttribute("fill","blue")
else
    myLogo.setAttribute("fill","red")
}
</script>
</body>
</html>

滚动页面时SVG徽标更改颜色：我应该使用两个不同的SVG文件还是用JS更改颜色？

1 个答案: