ポートでカスタムJointJSシェイプを作成するための定義済みのSVGファイルの使用

Question

JointJSで使用する一連の事前作成済みSVGシンボルがあります。 前処理された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

あなたの図形内の任意のSVGを表示するために、あなたのマークアップにSVGImageElementを追加することができます。 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/

それは（<?xml version="1.0" standalone="no"?>なし）直接あなたのマークアップにSVGファイルの内容を挿入することが可能だと注意、。私はより複雑なSVGのためにそれをお勧めしません。

たとえば、SVGにIDがSVGClipPathElementの場合です。シェイプの2つのインスタンスを作成すると、SVG内のすべてのIDが一意でなければならないという条件が壊れます。