為什么我不能讓這個 Svg 重音欄在 javascript 事件偵聽器上縮小

Question

我一直試圖讓它工作大約兩個小時，但不能，
似乎想出了如何去做。 我嘗試了所有我能想到的組合
並閱讀了一些文章和問題，但仍然沒有改變
在mousedown或mouseclick代碼如下：

HTML

<!-- ::.....::>> Remake in Svg Format. <<::.......:: -->
<div id="Burger">
    <div class="menu">
      <input type="checkbox" name="menu-active" id="menu-active">
      <div class="items first">
        <div class="i-1">Home</div>
        <div class="i-2">About</div>
      </div>
      <label for="menu-active">
        <div class="lines">
          <div class="line-1"></div>
          <div class="line-2"></div>
          <div class="line-3"></div>
        </div>
      </label>
      <div class="items last">
        <div class="i-3">Services</div>
        <div class="i-4">Contact</div>
      </div>
      <i class="blob"></i>
    </div>
</div>
<div class="svg_cont">
<svg id="Hue_bar" viewBox="0 0 208.51721 1.5955585" version="1.1"
                 width="208.51721mm" height="1.5955585mm" style="" xmlns="http://www.w3.org/2000/svg"
                 sodipodi:docname="hue_space_bar.svg" xmlns:svg="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1"
                 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
                 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
                 xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
                 inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
                 xmlns:cc="http://creativecommons.org/ns#">
                <defs id="defs2"/>
                <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666"
                                    borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2"
                                    inkscape:zoom="0.98994949" inkscape:cx="396.84993" inkscape:cy="45.208726"
                                    inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false"
                                    inkscape:window-width="1288" inkscape:window-height="754" inkscape:window-x="156"
                                    inkscape:window-y="156" inkscape:window-maximized="0"/>
                      <metadata id="metadata5">
                        <rdf:RDF>
                          <cc:Work rdf:about="">
                            <dc:format>image/svg+xml</dc:format>
                            <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
                            <dc:title/>
                          </cc:Work>
                        </rdf:RDF>
                      </metadata>
              <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(-0.41000891,-0.47546211)">
                <image id="image3721" width="208.51721" height="1.5955585" x="0.41000891" y="0.47546211"
                       xlink:href="data:image/jpeg;base64,Redacted:Base64Image"
        style="image-rendering:optimizeQuality"
        preserveAspectRatio="none" decoding="async"/>
      </g>
</svg>
</div>

CSS

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  }
* body {
  display: grid;
  width: 100%;
  height: 100vh;
  place-items: center;  
  background-color: black;
  image-rendering: smooth;
  font-family: 'Syne Tactile', cursive;
  color: #adb5bd;    
  }
* body input[type="checkbox"] {
  display: none;
  }
#Burger{
    position:absolute;
    top:;left:8vw;
    width:488px;
    height:97px;
    background:green;
    padding:18px 0 27px 24px;
    background:linear-gradient(-33deg,black,black);
    }
.lines {
  cursor: pointer;
  z-index: 1;
  }
.lines [class^="line-"] {
  width: 60px;
  height: 8px;
  background: linear-gradient(-33deg,
        springgreen, mediumvioletred,
           deeppink);
  box-shadow: 0 0 7.2px 2.7px springgreen;
  transition: all 0.6s ease;    
  border-radius: 4.2px;    
  will-change: auto;    
  margin: 10px 0;
  }
#menu-active:checked ~ label .line-1 {
  transform: translatey(18px) rotate(45deg);
  background: linear-gradient(-33deg, gold, red, red, gold); z-index:8;
  /* width:18px; height:12.8px;*/
  /*  height:12.8px;*/
  box-shadow: 0 0 7.2px 2.7px red;
  }
#menu-active:checked ~ label .line-2 {
  transform: scale(0) rotateZ(3240deg);
  transition: all 887ms ease-in 84ms;
  box-shadow: 0 0 7.2px 64.7px red;
  z-index:7;
  }
#menu-active:checked ~ label .line-3 {
  transform: translatey(-18px) rotate(-45deg);
  background: linear-gradient(-33deg, gold, red, orange, gold); z-index:8;
  box-shadow: 0 0 7.2px 2.7px red;
  }
.menu {
  display: flex;
  flex-direction: row;
  
  }
label {
  display: flex;
  flex-direction: row;
  }
.items {
  display: flex;
  flex-direction: row;    
  justify-content: center;
  align-items: center;
  font-size: 27px;
  font-weight: 600;    
  transition: all 0.6s ease;    
  z-index: 0;
  }
.items [class^="i-"] {
  margin: 0 10px;
  padding:1.8px;    
  cursor: pointer;
  transition: all .3s ease;
  background:linear-gradient(-33deg,red,gold);
  font-size:calc(18px + 1.27vw);
  filter:blur(0.575px);
  background-clip:text;
  color:transparent;
  }
.items [class^="i-"]:hover {
  background:linear-gradient(134deg,#b8f406,green,blue);
  transition:all 428ms ease-in 2ms;
  text-shadow:0px 12.4px 1.54px springgreen;
  background-clip:text;
  color:transparent;
  }
.first {
  transform: translatex(100px);
  pointer-events: none;  
  opacity: 0%;
  }
.last {
  transform: translatex(-100px);
  pointer-events: none;    
  opacity: 0%;
  }
#menu-active:checked ~ .first {
  transform: translatex(0px);
  pointer-events: auto;
  opacity: 100%;
  }
#menu-active:checked ~ .last {
  transform: translatex(0px);
  pointer-events: auto;
  opacity: 100%;
  }
.blob {
  position: absolute;
  top:50%; left:50%;    
  width: 22px; height: 22px;    
  transform: translate(-124%, -254%);    
  background: springgreen;
  filter: blur(2.88px);    
  border-radius: 50%;
  z-index:7;
  }
.blob:before{
    content:"";
    display:block;
    position:relative;
    border-radius:50%; left:80px;
    border-bottom-left-radius:2px;
    box-shadow:inset -2px 2px 4px 18px darkblue;       background:skyblue;
    }     /* width:22px; height:22px; */
.svg_cont{
    position:absolute; height:8px;
    top:64%; left:calc(0.04vw + 108px);
    width:790px; overflow:hidden;
    }
#Hue_bar{
    position:absolute;
    top:0%; left:calc(0);
    transition:width 288ms ease-in-out 4ms;    
    transform:translate(0%);
    }

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");
});

& Codepen 示例在這里： https ://codepen.io/MistaKisthur/pen/dyXropM

我希望 Svg Bar 元素在選中復選框時做出響應，因此當導航菜單打開時，svg 是全寬的，與文本內嵌。 然后當它再次點擊它縮小它的 x 寬度到大約 20/40px

我嘗試過setAttribute ， style.transform ， setting it width ，添加!important ，將它包裝在一個 div 中，將其設置為溢出隱藏，然后嘗試縮小該元素。 在 svg 中試過內聯，試過 elem.setAttributeNS() 函數，試過添加或刪除類並試過elem.contentDocument沒有一個對內聯 svg 有任何影響......我是否錯過了一些非常愚蠢的東西我看不到的代碼..

Answer 1

你做錯了幾件事：

1. 事件是"click" ，而不是"mouseclick" 。
2. qS('.svg_cont')返回單個 DOM 元素，而不是數組。 所以svg_cont[0] （就像你在你的代碼筆中一樣），是無效的。
3. contentDocument僅適用於<iframe>和<object>等元素。 不是<div> 。

如果您想更改 SVG 的width ，您可以通過多種方式來實現。 例如：

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

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