您可以添加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 包含SVGClipPathElement
有一个ID。创建形状的 2 个实例会破坏 SVG 中所有 ID 必须唯一的条件。