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

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

  
  
      
         
     
    
     
       



首先看初始加载效果图

svg中use元素引用symbol样式的思考_第1张图片

该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中的元素,stroke是放在style属性当中的,所有对于“直接为use添加class使第一条220kv母线不带电,no work“,因为css中的并未成覆盖stroke。所以要使用js代码将line元素的stroke属性放到外面,这时work了

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

你可能感兴趣的:(svg,html)