svg中use元素引用symbol样式的思考

13 篇文章 0 订阅

对于use元素当引用的symbol当只有填充色或线色变化时可以通过给use元素添加class来减少代码量。直接上代码

<!DOCTYPE html>  
<html>  
    <head>  
       <style type="text/css">
        svg line {  
          stroke: inherit;  
        }  	   
        use.uncharged{
		  fill: #4BC0A5;  
          color: #A4DFD1; 
		  stroke:#999999;
		}
      </style>  
   </head>  
    <script src="d3.js"></script>
   <body>  
       <div style="width:700px;height:300px;border:2px solid #F00;overflow-y:scroll;" style="-webkit-user-select: none;"> 
<svg contentScriptType="text/ecmascript" width="2000" xmlns:xlink="http://www.w3.org/1999/xlink" zoomAndPan="magnify" style="background-color:#000000;" contentStyleType="text/css" viewBox="0 0 2000.0 2000.0" height="2000" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" version="1.0">
<defs>
<symbol statusvalue="0" statusname="正常状态" categoryname="linefeeder" groupname="eleobj" viewBox="0 0 100.0 7.0" id="220kV母线_0" preserveAspectRatio="none meet" alisaname="220kV母线">
<defs/>
<line y2="3.543307" style="stroke:#800080;stroke-dasharray:none;stroke-width:5.3149605;" x1="0" x2="99.99921015400001" lineType="line" y1="3.543307"/>
</symbol>
<symbol statusvalue="0" statusname="正常状态" categoryname="linefeeder" groupname="eleobj" viewBox="0 0 106.0 7.0" id="500kV母线_0" preserveAspectRatio="none meet" alisaname="500kV母线">
<defs/>
<line y2="3.543307" style="stroke:#ffffb7;stroke-dasharray:none;stroke-width:5.3149605;" x1="0" lineType="line" x2="105.250391128" y1="3.543307"/>
</symbol>
</defs>
<use id="use1" typename="busb" xmlns:xlink="http://www.w3.org/1999/xlink" style="shape-rendering:auto;" transform="" width="400" xlink:show="embed" xlink:type="simple" symbolname="220kV母线" height="7" groupname="eleobj" categoryname="linefeeder" x="168" y="106" xlink:href="#220kV母线_0" xlink:actuate="onLoad"/>
<use id="use2" typename="busb" xmlns:xlink="http://www.w3.org/1999/xlink" style="shape-rendering:auto;" transform="" width="400" xlink:show="embed" xlink:type="simple" symbolname="500kV母线" height="7" groupname="eleobj" categoryname="linefeeder" x="167.99998474121094" y="144" xlink:href="#500kV母线_0" xlink:actuate="onLoad"/>
</svg>


        </div>  
		<button id="btn" οnclick="fn1()">替换use引用的symbol</button>
		<button id="btn" οnclick="fn1Restroe()">恢复</button></br>
		<button id="btn" οnclick="fn2()">修改第二条的symbol样式</button></br>
		<button id="btn" οnclick="fn3()">直接为use添加class使第一条220kv母线不带电,no work</button>
		<button id="btn" οnclick="fn4()">通过将symbol中的style中的stroke拿出来并且为use添加class使第一条220kv母线不带电,work</button></br>
		
		<button id="btn" οnclick="fn5()">通过将移除use的class使第一条220kv母线带电,no work</button>
		<button id="btn" οnclick="fn6()">通过将移除use的class然后将symbol中的stroke写到style中使第一条220kv母线带电,work</button>
		<script>
	
		 function fn1(){
		  d3.select("#use1").attr("xlink:href","#500kV母线_0");
				
		}
		 function fn2(){
		 //d3不能选中symbol元素,改用js
		  //alert(d3.select("#500kV母线_0"));
		  console.log(document.getElementById("500kV母线_0"));
		  var symbolNode=document.getElementById("500kV母线_0")
		  var childs = symbolNode.childNodes;    
          for(var i = childs.length - 1; i >= 0; i--) {      
              var child=childs.item(i);
              if(child.nodeName=="line"){
			     console.log(child.style.stroke);
				 child.style.stroke="#ffffff";
				 console.log(child.style.stroke);
			  }			  
          }  
		  //symbol样式已经变了但是use元素并未随之更新,重新设置xlink:href后发现生效了,use元素也变成了白色
		   d3.select("#use2").attr("xlink:href","#500kV母线_0");
		}
		
		function fn3(){
		  d3.select("#use1").attr("class","uncharged");
		  console.log("并未能生效");
		}
		function fn4(){
		  var symbolNode=document.getElementById("220kV母线_0")
		  var childs = symbolNode.childNodes;    
          for(var i = childs.length - 1; i >= 0; i--) {      
              var child=childs.item(i);
              if(child.nodeName=="line"){
			     console.log(child.style.stroke);
				 child.setAttribute("stroke",child.style.stroke);
				 child.style.stroke="";
			  }			  
          }  
		  d3.select("#use1").attr("class","uncharged");
		
		  console.log("生效了");
		}
		
		function fn5(){
		  d3.select("#use1").attr("class","");
		  console.log("并未能生效,并且发现整个引用的symbol都绘制不出来了");
		  //document.getElementById("use1").removeAttribute("class");
		}
		
		function fn6(){
		var symbolNode=document.getElementById("220kV母线_0")
		  var childs = symbolNode.childNodes;    
          for(var i = childs.length - 1; i >= 0; i--) {      
              var child=childs.item(i);
              if(child.nodeName=="line"){
				 child.style.stroke=child.getAttribute("stroke");
			  }			  
          }  
		  d3.select("#use1").attr("class","");
		 
		  console.log("居然生效了");
		 
		}
		
		function fn1Restroe(){
		 d3.select("#use1").attr("xlink:href","#220kV母线_0");
		}
		</script>
    </body>  
</html>  
首先看初始加载效果图

该svg中有两个use元素,第一条引用了一个紫色的220kv母线symbol,第二条引用了一个黄色的500kV母线。

1 点击第一个按钮"替换use元素引用的symbol",这个发现第一条也成了500kV母线,这里就是简单改了一个第一个use元素的xlink:href

2 点击第一个按钮"修改第二条的symbol样式",这是直线用js代码修改了500kV母线的symbol的stroke属性,注意这里修改完成必须重新设置一下use的xlink:href

3 重点来了,对于第一条母线,假如我想让它不带电的时候为灰色,这时不用再添加一个symbol,在css中直接加入了uncharged的class属性,定义了灰色,

   按照常规思维,再加好css属性后,我直接为use1添加了class="uncharged"属性,发现并未生效,这时因为我定义的symbol中的<line>元素,stroke是放在style属性当中的,所有对于“直接为use添加class使第一条220kv母线不带电,no work“,因为css中的并未成覆盖stroke。所以要使用js代码将line元素的stroke属性放到外面,这时work了

4 对于恢复到原来的颜色,也不能简单的为use元素remove它的class属性,而应该把symbol中线的stroke属性写回到style中

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值