使用預定義的SVG文件創建帶有端口的自定義JointJS形狀

Question

我有一系列預先創建的SVG符號，我想在JointJS中使用。 我已經搜索了關於使用預先創建的SVG，我發現可以創建一個完整的自定義元素使用SVG將SVG放在'標記'屬性 - （https://groups.google.com/forum/#!topic/jointjs/pQvN_0lXPVk）。

下面是一個SVG的例子。我將非常感謝您對如何將此定義嵌入到標記屬性中並向其中添加端口的幫助。

感謝

<?xml version="1.0" standalone="no"?> 
<svg viewBox="0 0 1024 768" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" stroke-linecap="round" stroke-linejoin="round" fill-rule="evenodd" xml:space="preserve" > 
<defs > 
<clipPath id="clipId0" > 
<path d="M0,768 1024,768 1024,0 0,0 z" /> 
</clipPath> 
</defs> 
<g stroke-width="0.1" clip-path="url(#clipId0)" fill="none" stroke="rgb(0,0,0)" /> 
<g stroke-width="0.25" clip-path="url(#clipId0)" fill="rgb(0,0,0)" stroke="none" > 
<path d="M1013.96,634.98 10.0392,634.98 1013.96,133.02 z" /> 
</g> 
<g stroke-width="0.25" clip-path="url(#clipId0)" fill="none" stroke="rgb(0,0,0)" > 
<polyline points="10.0392,133.02 1013.96,133.02 1013.96,634.98 10.0392,634.98 10.0392,133.02 " /> 
<polyline points="10.0392,634.98 1013.96,133.02 " /> 
</g> 
</svg> 

Answer 1

您可以將SVGImageElement添加到您的標記，以顯示你的形狀任意SVG。只需將SVG文件內容轉換爲dataURL並設置xlink:href屬性即可。

var shape = new joint.shapes.basic.Image({ 
    // markup: '<g class="rotatable"><g class="scalable"><image/></g><text/></g>',  
    attrs: { 
    image: { 
     'xlink:href': 'data:image/svg+xml;utf8,' + encodeURLComponent(svgFileContent) 
    } 
    } 
}); 

http://jsfiddle.net/kumilingus/eqen3pdf/

爲了創建的形狀示出SVG圖像並且還具有端口可以例如使用devs.Model形狀，並使用SVGImageElement替換其標記中唯一的SVGRectElement。

new joint.shapes.devs.Model({ 
    markup: '<g class="rotatable"><g class="scalable"><image class="body"/></g><text class="label"/><g class="inPorts"/><g class="outPorts"/></g>', 
    attrs: { 
    '.body': { 
    'xlink:href': 'data:image/svg+xml;utf8,' + encodeURLComponent(svgFileContent) 
    }, 
    inPorts: ['in'], 
    outPorts: ['out'] 
}); 

http://jsfiddle.net/kumilingus/tm2ctvxq/

注意，它是可能的SVG文件內容直接插入到您的標記（不<?xml version="1.0" standalone="no"?>）。我不會推薦它用於更復雜的SVG。

例如，當SVG包含帶有ID的SVGClipPathElement時。創建形狀中斷的2個實例會導致SVG中的所有ID都必須是唯一的。