SVG使用，动态追加SVG

最新推荐文章于 2024-08-01 16:08:09 发布

脆脆鲨_HCC

最新推荐文章于 2024-08-01 16:08:09 发布

阅读量506

点赞数 2

分类专栏： SVG 文章标签： JS SVG

本文链接：https://blog.csdn.net/qq_40067662/article/details/88568629

版权

SVG 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、创建一个div，里边放svg图

<div class="SWSSVG" id="SWSSVG" style="width: 68%; height:6.2rem ;position: absolute;top: 0.5rem;left: 2.7rem; border: 1px solid #0088CC;z-index: 9999999999;">
</div>

2、动态追加svg放在里边，给他添加一个ID

$("#SWSSVG").append("<object data=\"SWS.svg\" id=\"SVGSWS\"  width=\"100%\" height=\"100%\" type=\"image/svg+xml\" pluginspage=\"http://www.adobe.com/svg/viewer/install/\"></object>");

3、设置缩放！

            setTimeout(function(){
	    		var panZoom = window.panZoom = svgPanZoom('#SVGSWS',{
			        zoomEnabled: true,
			        controlIconsEnabled: true,
			        fit: 1,
			        center: 1
			    });
			    $(window).resize(function(){
			        panZoom.resize();
			        panZoom.fit();
			        panZoom.center();
			    });
	    	},100)
	    	setTimeout(function(){
	    		checkReadySWS();
	    	},100)

注意：设置缩放必须等到svg加载完成之后才可以获取到！

4、执行一下方法：

function checkReadySWS(){
    	var svgDocument = document.getElementById("SVGSWS").getSVGDocument();
        if (svgDocument == null) {
            setTimeout("checkReadySWS()", 300);
        } else {
        }
    }

在此方法里对svg元素进行操作，

5、以下操作是动态进行加点位，鼠标移上显示隐藏

//楼
        	var jglhdal = svgDocument.getElementById("jglhdal");
        	var jglhdalBg = svgDocument.getElementById("jglhdalBg");
        	jglhdalBg.setAttribute("display","none");
        	var  jglhdalSS = svgDocument.getElementById("jglhdalSS");
	    	var  jglhdalJR = svgDocument.getElementById("jglhdalJR");
	    	var  jglhdalOne = svgDocument.getElementById("jglhdalOne");
	    	var  jglhdalTwo = svgDocument.getElementById("jglhdalTwo");
	    	if(window.localStorage.lszlysJR!=0){
	    		
	    	}else{
				jglhdalOne.setAttribute("to","1")
	    		jglhdalTwo.setAttribute("to","1")
	    	}
            setTimeout(function(){
                jglhdalSS.innerHTML=window.localStorage.jglhdalSS;
                jglhdalJR.innerHTML=window.localStorage.jglhdalJR;
            },100);
        	jglhdal.onmouseover = function () {
				jglhdalBg.setAttribute("display","block");
        	}
        	jglhdal.onmouseout = function () {
				jglhdalBg.setAttribute("display","none");
        	}
        	// 加工楼和档案楼结束

下边是SVG图中的结构

<!-- 这是点位，圆圈，可换颜色，调节位置，半径大小，设置显隐  -->
<circle cx="288" cy="720" r="15" 
stroke-width="2" fill="#F00" id="jglhdal">
	<animate id='jglhdalOne' attributeName='fill-opacity'  attributeType='XML' begin='0s;jglhdalTwo.end' dur='0.8s' from='1' to='0.4' fill='freeze'  repeatCount="indefinite"/>
	<animate id='jglhdalTwo' attributeName='fill-opacity'  attributeType='XML' begin='jglhdalOne.end' dur='0.8s' from='0.4' to='0.7' fill='freeze'  repeatCount="indefinite"/>
	<animate id='lszani3' attributeName='fill-opacity'  attributeType='XML' begin='jglhdalOne.end' dur='0.8s' from='0.7' to='1' fill='freeze'  repeatCount="indefinite"/>
</circle>
<!-- 用水BG，后边黑色背景图  -->
<g id="jglhdalBg">
	<g>
		<rect x="210.7" y="590.9" fill="#000" opacity="0.5" border-radius="10px" width="170" height="90"/>
		<text transform="matrix(1 0 0 1 245.6692 640.013)">
			<tspan x="-20" y="0" fill="#FFF" font-family="'MicrosoftYaHei'" font-size="14" letter-spacing="1">水表读数：</tspan>
			<tspan x="50" y="0" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="14" letter-spacing="1" id="jglhdalSS"></tspan>
			<tspan x="-20" y="25" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="14" letter-spacing="1">今日用量：</tspan>
			<tspan x="50" y="25" fill="#FFFFFF" font-family="'MicrosoftYaHei'" font-size="14" letter-spacing="1" id="jglhdalJR"></tspan>
		</text>
	</g>
	<g>
		<text transform="matrix(1 0 0 1 230.767 615.0175)"  font-family="'MicrosoftYaHei'" font-size="14" letter-spacing="3" fill="#FFF"  >加工楼和档案楼</text>
	</g>
</g>