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

最新推荐文章于 2024-05-13 09:01:10 发布
最新推荐文章于 2024-05-13 09:01:10 发布
阅读量4.6k 收藏 2
点赞数
分类专栏： svg html 文章标签： svg class css style use symbol
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaozhu2hao/article/details/53183743
版权
svg 同时被 2 个专栏收录
14 篇文章 0 订阅
订阅专栏
html
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
    评论
专栏目录
SVG入门-标签2
natsu-cc的博客
03-21 1344
不可视标签 不可视标签是svg标签中比较核心的部分，扩展了svg的功能。这部分标签不能之前显示在svg视图上，但可以用于定义纹理，和管理标签。 <use> <use> 标签用于复制一个形状. <use>标签是会显示的，显示的形状为href引用中定义的节点的内容，use本身不定义形状的路径。 <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <circle id="myCircl
一篇文章带你了解SVG ＜use＞ 元素
weixin_44215068的博客
06-15 9218
目录一、简单案例分析二、在defs元素外使用形状三、设置CSS样式四、总结SVG 元素可以重用SVG文档中其他位置（包括 元素和 元素）的SVG形状。可以在 元素内部（使形状直到使用之前不可见）或外部定义重用形状。示例 这个实例显示了在元素中定义的元素。这使得不可见，除非被元素引用。在引用元素之前，必须通过其ID属性对其设置ID。元素通过其xlink:href属性。注意属性值中ID前面的#。元素通过其...
svg标签如何搭配use标签使用
ivan5277的博客
04-22 1419
元素引用另一个元素时，实际上会在内部创建一个新的Shadow DOM，这意味着对原始元素应用的样式会继承到引用的副本上，但不能直接通过常规CSS选择器作用于克隆后的元素。如果你希望修改引用元素的样式，可以直接在CSS中针对该元素ID或者。它可以引用SVG文档内的其他元素，通常这些元素是在。标签极大地提高了SVG元素的复用性，避免了文档中不必要的冗余，同时支持通过CSS进行灵活的样式控制。在SVG文档中，先创建一个或多个可以被复用的元素，比如一个形状、路径或者符号（然后，在SVG文档的任何位置，可以用。
10. SVG中use，g，defs 元素
最新发布
一名全栈开发工程师
05-13 1297
svg 中 defs use g 的用法。
学习笔记——SVG.js中的use和marker元素的相关方法
qq_41339126的博客
05-21 969
SVG.js中的use和marker元素的相关方法。 use元素：use() marker元素：marker()、width()、height()、size()、update()、orient()
svg中use标签使用样式
热门推荐
qq_38761664的博客
06-20 1万+
今天看到技术群中有人问svg中use元素可以设置样式属性不？因为他的symbol有200多种，但是只是颜色不一样。如果挨个定义，那svg文件就会很长。自己也思考过这个问题后来看到http://tympanus.NET/codrops/2015/07/16/styling-svg-use-content-css/这篇文章，收益匪浅。这篇文章讲的比较详细。就不在解释原理了。直接上自己测试例子的代码，比
svg之defs以及use的使用
子非渔
03-20 3806
首先说需求：要求做一个可复制拉伸的线，也就是不是伸长，而是复制 类似下图：拉伸之前 拉伸之后： 那么这是怎么做到呢？下面来说一说 首先需要了解svg的defs以及use是什么 SVG的元素用于预定义一个元素使其能够在SVG图像中重复使用。例如你可以将一些图形制作为一个组，并用元素来定义它，然后你就可以在SVG图像中将它当做简单图形来重复使用 ---------------------声明 SV...
在 React、Vue项目中使用SVG的方法
08-28
在 Vue 中使用 SVG 可以像在普通网页中使用 SVG 那样，或者利用 SVG 的 use 标签，不直接在主页面中编写绘制 SVG 图标的代码，而是把这一大段的代码放到另外的文件中，然后使用 use 引用这段绘制图标的代码。...
react-svg-atlas:结合，隔离，使SVG飙升
05-16
这是React版本 使用<symbol>元素将svg文件合并为一个。 在阅读有关此内容的更多信息。 PS： isolate SVG的正确方法是使用SVGO的插件And make SVG composible again! ?? 是的-react-svg-atlas还将一个SVG与另一个SVG...
HTML5之SVG 2D入门8—文档结构及相关元素总结
09-28
- `symbol`: 定义可复用的图形符号，通常用于`<use>`元素引用。 - `use`: 引用并重复使用`<defs>`或`<symbol>`中的图形。 5. **渐变元素**： - `linearGradient`: 定义线性渐变。 - `radialGradient`: 定义径向...
HTML5 SVG地图旋转动画特效
06-24
6. **性能优化**：考虑到大量使用SVG和动画可能会对性能造成影响，可以采用SVG符号（`<symbol>`元素）和`<use>`元素引用，减少DOM节点数量；同时，合理利用硬件加速，如使用`will-change`属性。 在提供的"说明....
JS动态生成SVG对象动态设置use和属性
小问's blog
11-30 2314
需求： JS动态生成SVG对象，然后动态生成use子元素并设置xlink:href属性；然后appendChild到页面DOM； 这是我在使用svg制作icon图标的时候遇到的问题，就是symbol 然后svg use引用，方便制作icon； 通用方法： 直接外围一个div, 然后 div.innerHTML = '<svg class="icon"><use xlink:href="#'+name+'"></use></svg>' 这样是可以的
[转]用CSS给SVG <use>的内容添加样式
weixin_30588827的博客
12-15 1003
来源：http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=referral ---------------------------------------------------------------------------------------------...
svg use_超越了use元素的自动svg压缩
weixin_26715991的博客
08-31 347
svg useLink a la versión en español. 链接西班牙语 。 If you draw your own SVG files or if you download them from the internet, tools like this SVG-Editor or SVGOMG are your friends. Compressing the files wit...
获取svg use标签内的元素
yanhappiness
01-25 6176
先讲结论：我查阅了文档，暂时也没有方法可以获取到&amp;lt;use&amp;gt;标签内的元素。 我试图使用 $(&quot;#useId&quot;).find(&quot;#contentId&quot;).attr(“attr”) – 无效 $(&quot;#contentId&quot;).attr(“attr”) – 未达到预期，选中defs内组件 $(&quot;#shadow-root&quot;
svg中g，defs，symbol和use的用法
神zhi殇的博客
06-03 2846
http://www.softwhy.com/article-122-1.html
SVG_16_defs标签_use标签_style标签_红绿灯效果
知识搬运工，资料任你拿，包括书籍、电影、电视剧、网站、软件等，VX公人人人号：向前书局
05-16 1504
知识点： defs标签 SVG 允许我们定义以后需要重复使用的图形元素。建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加SVG内容的易读性和可访问性。在defs元素中定义的图形元素不会直接呈现。你可以在你的视口的任意地方利用<use>元素呈现这些元素。 use标签 通过defs定义好被引用的标签或标签组后，再使用use标签进行引用。 use元素在SVG文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM...
使用CSS来设置SVG中Use元素的样式
xiaozhu2hao的专栏
08-12 6066
今天看到技术群中有人问svg中use元素可以设置样式属性不？因为他的symbol有200多种，但是只是颜色不一样。如果挨个定义，那svg文件就会很长。自己也思考过这个问题后来看到http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/这篇文章，收益匪浅。这篇文章讲的比较详细。就不在解释原理了。直接上自己测试例子的代码，比
svg 中use怎么保存图片
01-28
在SVG (Scalable Vector Graphics) 中，可以使用<use>元素来保存图片。<use>元素可以引用其他SVG文件中定义的元素，从而实现图片的复用和保存。 要保存图片，首先需要在SVG文件中定义图片元素，例如一个<circle>元素表示一个圆形。然后，在同一个SVG文件或者其他SVG文件中，可以使用<use>元素来引用并保存这个圆形。例如，可以使用以下代码来保存一个圆形： <svg> <circle id="myCircle" cx="50" cy="50" r="40" fill="red" /> <use xlink:href="#myCircle" x="100" y="100" /> </svg> 在上面的例子中，<circle>元素定义了一个圆形，并且指定了id为"myCircle"。然后，<use>元素通过xlink:href属性引用了id为"myCircle"的圆形，并且通过x和y属性设置了该圆形在画布中的位置。 通过这种方式，可以在SVG文件中保存图片元素，并且可以通过<use>元素在不同的位置和不同的SVG文件中引用和复用这些图片元素。这样可以极大地简化SVG文件的结构和管理，同时也能够减少文件大小和提高性能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值