使用预定义的 SVG 文件创建带有端口的自定义 JointJS 形状答案

【问题标题】：Using predefined SVG file for creating a custom JointJS shape with ports使用预定义的 SVG 文件创建带有端口的自定义 JointJS 形状
【发布时间】：2016-09-06 06:10:09
【问题描述】：

我有一系列预创建的 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>

【问题讨论】：

标签： svg shapes ports jointjs

【解决方案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 形状并将其标记中唯一的SVGRectElement 替换为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/

请注意，可以将 SVG 文件内容直接插入到您的标记中（无需 <?xml version="1.0" standalone="no"?>）。不过，对于更复杂的 SVG，我不会推荐它。

例如，当 SVG 包含带有 id 的 SVGClipPathElement 时。创建 2 个形状实例会破坏 SVG 中的所有 ID 必须唯一的条件。

【讨论】：