Adobe SVG Viewer 中使用外部文件定义的Symbol

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

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

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

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

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

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

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

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