使用预定义的SVG文件创建带有端口的自定义JointJS形状
我想在JointJS中使用一系列预先创建的SVG符号。 我搜索了有关使用预创建的SVG的内容,发现可以通过将SVG放在“markup”属性-()中来使用SVG创建完整的自定义元素 下面是SVG的示例。非常感谢您的帮助,告诉我如何将此定义嵌入markup属性并向其中添加端口 谢谢使用预定义的SVG文件创建带有端口的自定义JointJS形状,svg,shapes,ports,jointjs,Svg,Shapes,Ports,Jointjs,我想在JointJS中使用一系列预先创建的SVG符号。 我搜索了有关使用预创建的SVG的内容,发现可以通过将SVG放在“markup”属性-()中来使用SVG创建完整的自定义元素 下面是SVG的示例。非常感谢您的帮助,告诉我如何将此定义嵌入markup属性并向其中添加端口 谢谢 <?xml version="1.0" standalone="no"?> <svg viewBox="0 0 1024 768" version="1.1" xmlns="http://www.w3.
<?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>
您可以将
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)
}
}
});
注意,可以将SVG文件内容直接插入到标记中(无需
)。不过,对于更复杂的SVG,我不推荐使用它
例如,当SVG包含一个id为的SVGClipPathElement
时。创建两个形状实例将打破SVG中所有id必须唯一的条件
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']
});