通过JS函数加载SVG
Load SVG via JS function
我试图通过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>
相关文章:
- 异步加载的SVG过滤器feColorMatrix在Chrome中工作,而不是在Safari或Firefox中
- 将 src 内容动态加载到 SVG 图像
- 将外部 SVG 和包含 JavaScript 加载到 HTML 中
- 在本地主机上捕捉不加载 svg
- 单击时加载新的 SVG
- 在 <对象> 标记中加载 SVG 时,将侦听器添加到 SVG 卸载事件
- .load() 事件在 SVG 完成加载后未被调用/无法访问其内容
- 定位D3 SVG画布x/y和加载时的缩放级别
- Fabric js从url加载svg缺少属性
- 使用SNAP.SVG平稳加载SVG
- 在没有DOM附加的情况下将多个SVG加载到javascript数组中
- 我们可以使用 Javascript 更改加载的 SVG 文件的颜色吗?
- 嵌入 SVG 加载事件不起作用
- 从 SVG 加载的结构 JS 形状的位置不正确
- 在将 svg 加载到画布后获取单个对象
- 如何使嵌入在HTML中的SVG加载其xlink:href依赖项
- 将外部SVG加载到SVG中
- Snap svg加载内部加载
- 在SVG加载之后修改它
- 美元(窗口).在chrome中完成嵌入SVG加载之前加载触发