Utilisation d'un fichier SVG prédéfini pour créer une forme JointJS personnalisée avec les ports

Question

J'ai une série de symboles SVG pré-créés que je veux utiliser dans JointJS. J'ai cherché à utiliser des SVG précréés et j'ai trouvé qu'il était possible de créer un élément personnalisé complet en utilisant SVG en mettant le SVG dans la propriété 'markup' - (https://groups.google.com/forum/#!topic/jointjs/pQvN_0lXPVk).

Voici un exemple de fichier SVG. Votre aide sur la façon dont je peux intégrer cette définition dans la propriété de balisage et y ajouter des ports sera très appréciée.

Merci

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

Vous pouvez ajouter le SVGImageElement à votre balisage pour afficher SVG arbitraire dans vos formes. Il suffit de convertir le contenu du fichier SVG en dataURL et de définir l'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/

Afin de créer une forme montrant une image SVG et ayant encore des ports, vous pouvez par exemple utiliser devs.Model forme et remplacer le seul SVGRectElement dans son balisage avec un 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/

Notez qu'il est possible d'insérer le contenu du fichier SVG directement dans votre balisage (sans <?xml version="1.0" standalone="no"?>). Je ne le recommanderais pas pour un SVG plus complexe.

Par exemple, lorsque SVG contient un SVGClipPathElement avec un identifiant. Créer 2 instances de vos sauts de forme conditionne que tous les ID du SVG soient uniques.