SVG.外部<symbol/>

ZC：待测试：

ZC：　　（1）、chrome等浏览器 在什么版本（什么时候）开始 能够 引用外部<symbol/>

ZC：　　（2）、Qt532 的WebKit 能否支持  引用外部<symbol/>

1、

2、网页资料：

Adobe SVG Viewer 中使用外部文件定义的Symbol（https://blog.csdn.net/fxz1982/article/details/6044734）

2010年11月30日 10:20:00

阅读数：1844

Adobe SVG Viewer并不支持W3C中提到的外部修饰引用方法如:

[xhtml]  view plain  copy

 

1. <use x="0" y="0" xlink:herf="外部文件.svg#修饰ID">  

 

扫描二维码关注公众号，回复： 977810 查看本文章

这个缺陷不知道是Adobe有心还是无意,反正SVG在Adobe已经是后娘养的了.不多说,看解决方案.

方案:把外部定义的修饰内容加载到使用它们的SVG文件中

创建一个专用的自定义修饰的SVG文件如symbols.svg,当然也可以在这个文件中加入CSS丰富一下

[xhtml] view plain copy

 

1. <defs>  
2.         <symbol id="mySymbol" viewBox="0,0,18,32" >  
3.          <rect x="2" y="4" width="13" height="23" transform="rotate(0,8,15)" fill="red" stroke-width="2"/>  
4.         </symbol>  
5.     </defs>  

保存这个文件,看一下如何在其它SVG文件中引用它,方法很简单,就是用DOM把修饰内容加入到要使用它们的SVG文件中就可以了

[javascript]  view plain  copy

 

1. var embed = document.getElementById("embed");//ASV控件  
2. var svgDoc = embed.getSVGDocument();  
3. var svgRoot = common.svgDoc.documentElement;  
4. var svgDom = embed.window;  
5. //引用自定义修饰  
6. svgDom.getURL("symbols.svg", loadSymbol);   
7. /**加载外部修饰文件*/  
8. function loadSymbol(data){  
9.     if(data.success){  
10.       var newSymbol = svgDom.parseXML(data.content,svgDom.document);  
11.       svgRoot.getElementsByTagName("defs").item(0).appendChild(newSymbol);  
12.      }   
13. }  

 

3、

4、

5、