js动态创建svg(兼容ios7、8)

最新推荐文章于 2024-05-23 15:11:56 发布

yanyang1116

最新推荐文章于 2024-05-23 15:11:56 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript svg css/html5 文章标签： ios7 svg createElementNS javascript

本文链接：https://blog.youkuaiyun.com/yanyang1116/article/details/53258370

javascript 同时被 3 个专栏收录

40 篇文章

订阅专栏

css/html5

8 篇文章

订阅专栏

svg

3 篇文章

订阅专栏

该博客介绍了如何在JavaScript中动态创建SVG图像，并确保其在iOS7和iOS8上正常工作。通过使用createElementNS方法创建SVG元素，并结合innerHTML和DOM操作来解决iOS7、8的命名空间问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// ...
	/* 
	 * 下面的这段写法，可以做到在原生js中，动态插入能兼容ios7、8的svg图像，iOS7、8命名空间的NS对象的直接innerHTML写入应该是有问题。
	 */
	var icon = document.createElementNS('http://www.w3.org/2000/svg', 'svg'), // 创建带有标准svg命名空间的节点
		svgHack = document.createElement('div'), // 创建承载的DOM对象
		svgHackTextNode = null,
		
		// 下面是具体的svg实现字符串
		svgContent = "<g transform='scale(0.09, 0.09)'><path d='M843.307 742.24c0 3.217 2.607 5.824 5.824 5.824s5.824-2.607 5.824-5.824c0 0 0 0 0 0 0-3.217-2.607-5.824-5.824-5.824-3.217 0-5.824 2.607-5.824 5.824 0 0 0 0 0 0zM714.731 874.912c0 0 0 0 0 0 0 6.398 5.186 11.584 11.584 11.584 6.398 0 11.584-5.186 11.584-11.584 0 0 0 0 0 0 0 0 0 0 0 0 0-6.398-5.186-11.584-11.584-11.584-6.398 0-11.584 5.186-11.584 11.584s0 0 0 0zM541.419 943.2c0 9.614 7.794 17.408 17.408 17.408s17.408-7.794 17.408-17.408c0-9.614-7.794-17.408-17.408-17.408-9.614 0-17.408 7.794-17.408 17.408zM354.859 934.048c0 0 0 0 0 0 0 12.795 10.373 23.168 23.168 23.168 12.795 0 23.168-10.373 23.168-23.168 0 0 0 0 0 0 0 0 0 0 0 0 0-12.795-10.373-23.168-23.168-23.168-12.795 0-23.168 10.373-23.168 23.168s0 0 0 0zM189.355 849.12c0 16.012 12.98 28.992 28.992 28.992s28.992-12.98 28.992-28.992c0 0 0 0 0 0 0-16.012-12.98-28.992-28.992-28.992-16.012 0-28.992 12.98-28.992 28.992 0 0 0 0 0 0zM74.731 704.736c0 19.228 15.588 34.816 34.816 34.816s34.816-15.588 34.816-34.816c0-19.228-15.588-34.816-34.816-34.816-19.228 0-34.816 15.588-34.816 34.816zM31.723 527.456c0 22.41 18.166 40.576 40.576 40.576s40.576-18.166 40.576-40.576c0-22.41-18.166-40.576-40.576-40.576-22.41 0-40.576 18.166-40.576 40.576zM67.115 351.328c0 25.626 20.774 46.4 46.4 46.4s46.4-20.774 46.4-46.4c0-25.626-20.774-46.4-46.4-46.4-25.626 0-46.4 20.774-46.4 46.4zM173.291 209.312c0 28.843 23.381 52.224 52.224 52.224s52.224-23.381 52.224-52.224c0 0 0 0 0 0 0-28.843-23.381-52.224-52.224-52.224-28.843 0-52.224 23.381-52.224 52.224 0 0 0 0 0 0zM329.195 127.968c0 32.024 25.96 57.984 57.984 57.984s57.984-25.96 57.984-57.984c0-32.024-25.96-57.984-57.984-57.984-32.024 0-57.984 25.96-57.984 57.984zM504.299 122.912c0 35.24 28.568 63.808 63.808 63.808s63.808-28.568 63.808-63.808c0 0 0 0 0 0 0-35.24-28.568-63.808-63.808-63.808-35.24 0-63.808 28.568-63.808 63.808 0 0 0 0 0 0zM664.619 195.04c0 38.421 31.147 69.568 69.568 69.568s69.568-31.147 69.568-69.568c0-38.421-31.147-69.568-69.568-69.568-38.421 0-69.568 31.147-69.568 69.568zM778.539 330.528c0 41.638 33.754 75.392 75.392 75.392s75.392-33.754 75.392-75.392c0-41.638-33.754-75.392-75.392-75.392-41.638 0-75.392 33.754-75.392 75.392zM823.851 506.016c0 44.854 36.362 81.216 81.216 81.216s81.216-36.362 81.216-81.216c0-44.854-36.362-81.216-81.216-81.216-44.854 0-81.216 36.362-81.216 81.216z' fill='#ff0000'/></g>";




	// 在承载的DOM对象中，使用innerHTML修改此对象的标签元素
	svgHack.innerHTML = "<svg>" + svgContent + "</svg>";




	svgHackTextNode = svgHack.childNodes[0].childNodes; // 这里svgHack.childNodes取到的是一个length为1的nodeList类数组对象




	// 下面就是遍历把所有的有效的nodeList对象取出来，当作一个nodeList节点添加到最初带有标准svg命名空间的节点
	for (var i = 0, length = svgHackTextNode.length; i < length; i++) {
		icon.appendChild(svgHackTextNode[i]);
	}




	/* icon is your object,do something you want */
// ...