通过 DOM 操作更改 SVG 笔触颜色答案

【问题标题】：Changing SVG stroke color by DOM manipulation通过 DOM 操作更改 SVG 笔触颜色
【发布时间】：2021-09-05 12:12:22
【问题描述】：

我的导航栏中有一条垂直线 SVG，我想在滚动时使用 DOM 操作更改其笔触颜色。

我可以在滚动时更改导航栏的背景颜色，也可以使用 DOM 操作更改 SVG 线的宽度，但无法更改笔触颜色我使用了很多方法，但没有人在工作。

请帮助我提供我的 SVG 代码和 JavaScript 代码。

我的 SVG 图像代码：-

<svg id="svg" width="4" height="71" viewBox="0 0 4 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="2.49985" y1="0.0214264" x2="1.49985" y2="70.0214" stroke="#FF0A0A" stroke-width="8"/>
</svg>

我的 JAVASCRIPT 代码：-

 useEffect(() => {
        window.onscroll = function() {scrollFunction()};
    })
    function scrollFunction() {
        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        //   document.getElementById("header").style.background = "red";
        //   document.getElementById("header").style.transition = "0.70s";
        //   document.getElementById("logotext").style.color = "white";
        //  document.getElementById("svg").stroke="red"
        //  document.getElementById("svg").style.stroke="red"
        document.getElementById("svg").setAttribute("stroke","red")
           console.log( document.getElementById("svg").stroke);
        } else {
          document.getElementById("header").style.background = "";
          document.getElementById("svg").setAttribute("stroke","white")
          console.log( document.getElementById("svg").stroke);
        }
      }

【问题讨论】：

代替document.getElementById("svg").setAttribute("stroke","red") 尝试设置线条document.querySelector("line").setAttribute("stroke","red")的笔触属性
非常感谢这解决了我的问题

标签： javascript html css svg

【解决方案1】：

尝试用querySelector("svg > line")选择：

window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.querySelector("svg > line").setAttribute("stroke","red")
  } else {
    document.querySelector("svg > line").setAttribute("stroke","white")
  }
}

<p>&darr;</p>
<p>&darr;</p>
<p>&darr;</p>
<p>&darr;</p>
<svg id="svg" width="4" height="71" viewBox="0 0 4 71" fill="none" xmlns="http://www.w3.org/2000/svg">
  <line x1="2.49985" y1="0.0214264" x2="1.49985" y2="70.0214" stroke="#FF0A0A" stroke-width="8"/>
</svg>
<p>&uarr;</p>
<p>&uarr;</p>
<p>&uarr;</p>
<p>&uarr;</p>
<p>&uarr;</p>
<p>&uarr;</p>
<p>&uarr;</p>
<p>&uarr;</p>
<p>&uarr;</p>
<p>&uarr;</p>

【讨论】：

非常感谢这解决了我的问题

【解决方案2】：

当您想要更改多个 CSS 选择器和属性时，另一种方法更容易，
就是切换整个<style id="scrolled">标签的disabled状态

通过一些额外的逻辑，您甚至可以管理多个 scrollTop 例如。 scrolled_over_50 通过循环遍历所有 document.querySelectorAll('style[id^="scrolled"]') 元素来定位。

window.onscroll = function() {
  document.querySelector("#scrolled")
          .disabled = !document.documentElement.scrollTop
}

<style>
 * { height:35vh }
 p { background:pink }
 #svg1 rect { fill:blue }
</style>
<style id="scrolled" onload="this.disabled=true">
  #svg1 { background:green }
  #svg1 rect { fill:lightgreen }
</style>
<p></p>
<svg id="svg1" viewBox="0 0 100 50" >
  <rect x="10%" y="10%" width="80%" height="80%"/>
</svg>
<p></p>

【讨论】：