为什么可以'；我不能在javascript事件侦听器上缩小这个Svg强调条吗

我已经试着让它工作了大约两个小时，但无法，
似乎在想怎么做。我已经尝试了我能想到的所有组合
阅读一些文章和问题，但仍然没有改变
在

mousedown

或

mouseclick

上，代码如下：

HTML

Javascript

let qS =(s)=>{
    return document.querySelector(s);
    }

let toggle   = qS('#menu-active');
let svg_cont = qS('.svg_cont');
let hue      = qS('#Hue_bar');

toggle.addEventListener("mousedown",(e)=>{
       svg_cont.contentDocument.setAttributeNS("http://www.w3.org/2000/svg","width", "20px");
});

&代码笔示例如下所示：

我希望Svg Bar元素在勾选复选框时做出响应，因此当Nav菜单打开时，Svg是全宽的，与文本内联。然后，当再次单击时，它会将其x宽度缩小到20/40px左右

---

我尝试了

setAttribute

，

style.transform

，

设置宽度

，添加

！重要信息

，将其包装在div中，将其设置为overflow hidden，然后尝试收缩该元素。尝试在svg内部内联，尝试elem.setAttributeNS（）函数，尝试添加或删除类&尝试

elem.contentDocument

它们都不会对内联svg产生任何影响。。我是否错过了一些我看不见的代码中非常愚蠢的、乱七八糟的东西。

你做错了几件事：

事件是“单击”，而不是“鼠标单击”

qS（'.svg_cont'）

返回单个DOM元素，而不是数组。因此，

svg\u cont[0]

（就像您在代码笔中看到的那样）是无效的

contentDocument

仅适用于

和

等元素。不是

如果要更改SVG的

宽度

，有几种方法。例如：

let svg_cont = qS('.svg_cont svg');

toggle.addEventListener("click",(e)=>{
       svg_cont.setAttribute("width", "20px");
});

---

mousedown是一个有效的事件侦听器，但我尝试了上面的代码，但仍然不起作用。。将arrow函数包装在parethesis中并运行，但仅在第一次单击时，即检查dom树时，“输入”复选框在其选中或未选中时没有更改任何值？我认为这是在选择它时作为属性添加的。设置宽度是单向操作。如果希望它来回切换，则需要添加额外的逻辑。属性值不会更改。相反，您需要读取DOM属性

elem.checked

。

let qS =(s)=>{
    return document.querySelector(s);
    }

let toggle   = qS('#menu-active');
let svg_cont = qS('.svg_cont');
let hue      = qS('#Hue_bar');

toggle.addEventListener("mousedown",(e)=>{
       svg_cont.contentDocument.setAttributeNS("http://www.w3.org/2000/svg","width", "20px");
});

let svg_cont = qS('.svg_cont svg');

toggle.addEventListener("click",(e)=>{
       svg_cont.setAttribute("width", "20px");
});