Question

如果标签溢出容器，我想对其进行自动滚动（效果如下：https://codepen.io/jamesbarnett/pen/kfmKa）。 SVG上的标签呈现为foreignObject标签，其中包含包裹在两个div中的值。加载mxGraph之后，我尝试覆盖getLabelValue函数，因此它使用必要的样式将标签值包装到另一个div中，但是随后标签显示在SVG的左上角，而不是元素位置。

window.mxCellRenderer.prototype.getLabelValue = function(state) {
        return (
            '<div class="scrolling-text">' +
            state.view.graph.getLabel(state.cell) +
            '</div>'
        );
    };

CSS：

.scrolling-text {
        position: absolute;
        overflow: hidden;
        animation: marquee 5s linear infinite;
    }

    @keyframes marquee {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
        }
    }

我设法用window.mxClient.NO_FO = true;摆脱了foreignObject 这样，标签div在SVG外部，位置正确，但是包装div失去了尺寸，因此标签不可见。

重要点：

图是使用draw.io创建的，然后使用mxGraph显示。
标签值将通过mxValueChange事件进行更改，并且更改后不应重置动画。

如何在给定约束下实现这种效果？

在mxGraph中自动滚动溢出文本

0 个答案: