Jointjs图到pdf也显示鼠标悬停链接svg答案

【问题标题】：Jointjs diagram to pdf showing mouseover link svg alsoJointjs图到pdf也显示鼠标悬停链接svg
【发布时间】：2016-07-28 07:26:56
【问题描述】：

我正在使用 jspdf 和 canvas 将使用 Jointjs 库制作的图表导出为 pdf：下面是我的 javascript 代码::

        var svg = document.querySelector('svg');

        var serializer = new XMLSerializer();
        var svgString = serializer.serializeToString(svg);
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        context.fillStyle = '#FFFF';

        canvg(canvas, svgString);

        var imgData = canvas.toDataURL('image/png');

        // Generate PDF
        doc.setFontSize(10);
        doc.text(35, 25, "Google Cloud Craft");
        doc.addImage(imgData, 'PNG', 10, 50);
        doc.save('test.pdf');

下载后在画布上得到的结果是：

我想要的是那些黑色箭头标记不应该出现在鼠标悬停事件上，它应该如下图所示供参考：

请告诉我如何实现这一目标。

【问题讨论】：

标签： pdf canvas svg jspdf jointjs

【解决方案1】：

让我试着回答一下。

添加以下代码以在序列化之前隐藏鼠标悬停的元素

   $(".marker-arrowhead").css("display", "none");
   $(".tool-remove").css("display", "none");
   $(".tool-options").css("display", "none");
   $(".marker-vertices").css("display", "none");

希望对你有所帮助。

【讨论】：

感谢您的帮助，它有效，但我认为正确的是添加此链接 attr，我正在发布我的答案
您在运行时需要那些箭头和鼠标悬停元素吗？用于拖动和调整大小。

【解决方案2】：

我找到了一个解决方案分享，如果有人遇到这个问题可以得到帮助。

这就是解决方案，熟悉jointjs的人都会明白。

link.attr({

            '.marker-arrowheads': {
                fill: 'none'
            },
            '.connection-wrap': {
                fill: 'none'
            },
            '.marker-vertices': {
                fill: 'none'
            },
            '.link-tools': {
                fill: 'none'
            }
        });

【讨论】：

【解决方案3】：

这是我的提议:)

const classes = ['.marker-vertices', '.link-tools'];
const svg = this.paper.svg.cloneNode(true);

// remove tools
classes.forEach(c => {
  const elements = svg.querySelectorAll(c);
  elements.forEach(el => { el.style.display = 'none'; });
});

【讨论】：