Verwenden vordefinierte SVG-Datei zum Erstellen einer benutzerdefinierten JointJS Form mit Ports

Question

Ich habe eine Reihe von vor-erstellten SVG-Symbole, die ich in JointJS verwenden möchte. Ich habe über die Verwendung von precreated SVGs gesucht und ich gefunden, um möglich zu sein, eine vollständige benutzerdefinierte Elemente mit SVG zu erstellen, indem Sie das SVG in die 'Markup' -Eigenschaft - (https://groups.google.com/forum/#!topic/jointjs/pQvN_0lXPVk).

Unten ist das Beispiel eines SVG. Ihre Hilfe dazu, wie ich diese Definition in die Markup-Eigenschaft einbetten und ihr Ports hinzufügen kann, wird sehr geschätzt.

Dank

<?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

Sie können die SVGImageElement zu Ihrem Markup hinzufügen beliebigen SVG in Ihre Formen angezeigt werden soll. Konvertieren Sie einfach den SVG-Dateiinhalt in dataURL und setzen Sie das Attribut 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/

Um eine Form zeigt ein SVG-Bild und noch mit Anschlüssen möglich zu erstellen z.B. Verwenden Sie devs.Model Form und ersetzen Sie die einzige SVGRectElement in seinem Markup mit einem SVGImageElement.

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/

Hinweis, dass es möglich ist die SVG-Datei-Inhalte direkt in Ihr Markup eingefügt werden soll (ohne <?xml version="1.0" standalone="no"?>). Ich würde es jedoch nicht für komplexere SVG empfehlen.

Zum Beispiel, wenn SVG eine SVGClipPathElement mit einer ID enthält. Wenn Sie zwei Instanzen Ihrer Formumbrüche erstellen, müssen alle IDs im SVG eindeutig sein.