javascript - 创建javascript动态svg
问题描述
我尝试使用 javascipt 创建动态 svg
我的结果是
<svg xmlns='http://www.w3.org/2000/svg' viewBox='5279 1710 12.125 12.125'>
<g transform='translate(4311 1165)'>
<path fill='#fffff' d='M346.045,76.5a5.632,5.632,0,0,0,0,8.245,6.143,6.143,0,0,0,1.6-4.122A6' transform='translate(632.48 470.439)'/>
</g>
</svg>
获取上图的js代码:
const svg1 = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
svg1.setAttribute('viewBox', '5279 1710 12.125 12.125')
svg1.setAttribute('transform', 'translate(4311 1165)')
svg1.setAttribute('fill', 'fffff')
svg1.setAttribute('d', "M346.045,76.5a5.632,5.632,0,0,0,0,8.245,6.143,6.143,0,0,0,1.6-4.122A6'")
解决方案
你弄错的事情是你将'd'属性添加到svg而不是创建路径和ag,试试这个
(function () {
var element = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
element.setAttribute('viewBox', '5279 1710 12.125 12.125');
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
g.setAttribute('transform', 'translate(4311 1165)');
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('fill', '#000000');
path.setAttribute('d', 'M346.045,76.5a5.632,5.632,0,0,0,0,8.245,6.143,6.143,0,0,0,1.6-4.122A6');
path.setAttribute('transform', 'translate(632.48 470.439)');
g.appendChild(path);
element.appendChild(g);
document.querySelector('body').appendChild(element);
})();
推荐阅读
- python - 以类似于 Windows Scheduler 的方式在 Mac 上安排脚本作业(主要是 Python)的最佳方式?
- javascript - TypeError:无法读取算法交易中未定义的属性“then”
- laravel - 如果依赖字段无效,如何停止验证字段?- 拉拉维尔
- python - libvlc - 在视频之间保持窗口打开
- c# - Google Cloud Vision API - client.DetectText - 如何获取特定的图像位置数据?
- javascript - 使用 javascript 和 css 修改警报框
- javascript - 将音频从
- opengl-es-2.0 - 在 GLSurfaceView Android 上更改 Bitmp
- python - 如何使用非跟踪 CECMod 计算能量输出
- java - 为什么我的后端应用程序没有在 Springboot 中运行?