如何用document.getElementById填充javascipt中的svg

问题描述

有没有一种方法可以用Javascript代码填充SVG图像，例如，如果您有一个ID为myButton的按钮，并且其中有一个SVG并使用document.getElementById("myButton").style来填充SVG，您怎么做？这是我尝试的代码：

document.getElementById("myButton").style.svg.fill="yellow";

<button id="myButton" type="submit">
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" xml:space="preserve">
    <g>
      <g>
        <path d="M281.1,0c-127.318,0-230.9,103.582-230.9,230.9c0,45.12,13.019,87.25,35.483,122.853l-70.654,70.654
          c-20.039,20.039-20.039,52.527,72.564c20.039,20.039,72.564,0l70.654-70.654
          c35.605,22.464,77.735,122.853,35.483c127.318,230.9-103.582,230.9-230.9S408.42,281.1,0z M281.1,410.489
          c-99.025,0-179.589-80.564-179.589-179.589S182.074,51.311,51.311S460.689,131.875,460.689,230.9
          S380.127,410.489,410.489z"/>
      </g>
    </g>
  </svg>
</button>

解决方法

document.getElementById("Layer_1").style.fill="yellow";

您必须定位svg元素而不是父div，并这样写。

,

获取SVG元素并设置fill样式。

let svg = document.getElementById("myButton").getElementsByTagName('svg')[0];
svg.style.fill = "yellow";

<button id="myButton" type="submit">
   <svg width="32px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" xml:space="preserve">
    <g>
      <g>
        <path d="M281.1,0c-127.318,0-230.9,103.582-230.9,230.9c0,45.12,13.019,87.25,35.483,122.853l-70.654,70.654
          c-20.039,20.039-20.039,52.527,72.564c20.039,20.039,72.564,0l70.654-70.654
          c35.605,22.464,77.735,122.853,35.483c127.318,230.9-103.582,230.9-230.9S408.42,281.1,0z M281.1,410.489
          c-99.025,0-179.589-80.564-179.589-179.589S182.074,51.311,51.311S460.689,131.875,460.689,230.9
          S380.127,410.489,410.489z"/>
      </g>
    </g>
  </svg>
</button>

,

document.getElementById('myButton').querySelector('svg').style.fill = 'yellow';

或者您可以消除对getElementById的调用

document.querySelector('#myButton  svg').style.fill = 'yellow';

,

在此示例中，通过单击按钮来分配颜色。而且您犯了一个错误-您需要写style.svg.fill而不是style.fill。

var button_svg = document.querySelector("#myButton");

button_svg.onclick = function (){
   this.style.fill="yellow";
}

button {
    width: 100px;
}

<button id="myButton" type="submit">
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" xml:space="preserve">
    <g>
      <g>
        <path d="M281.1,410.489z"/>
      </g>
    </g>
  </svg>
</button>

切换。

var button_svg = document.querySelector("#myButton");

button_svg.onclick = function (){
   this.classList.toggle('svg_yellow');;
}

button {
    width: 100px;
}

.svg_yellow {
    fill: yellow;
}

<button id="myButton" type="submit">
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" xml:space="preserve">
    <g>
      <g>
        <path d="M281.1,410.489z"/>
      </g>
    </g>
  </svg>
</button>

没有点击。

document.querySelector("#myButton").style.fill="yellow";

button {
    width: 100px;
}

<button id="myButton" type="submit">
   <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 512 512" xml:space="preserve">
    <g>
      <g>
        <path d="M281.1,410.489z"/>
      </g>
    </g>
  </svg>
</button>