通过JS函数加载SVG

Load SVG via JS function

本文关键字:SVG 加载 函数 JS 通过      更新时间:2023-09-26

我试图通过Javascript函数加载SVG到div,div已设置为<div class="svgicon"></div>

我可以改变div类,如果这是一个图像通过urlbackground,但已经尝试了这个SVG它无法呈现

这可能吗?

是什么错误?你换班应该没有问题。看看这个例子。

function changeSVG() {
	var div = document.getElementById('foo');
	if ( div.className == "class1" ) {
    div.className = "class2";
  } else {
  	div.className = "class1";
  }
}
document.getElementById('btn').addEventListener('click', changeSVG);
.class1 {        
        background-image: url('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/410.svg');
        height: 300px;
        width: 300px;
      }
      .class2 {
        background-image: url('https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/aa.svg');
        height: 300px;
        width: 300px;
      }
  <div id="foo" class="class1">
  </div>
  <br>
  <button id="btn" type="button" >
  Switch
  </button>