1

如果标签溢出它的容器，我想在标签上自动滚动（效果如下：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%);
        }
    }

我设法摆脱了 foreignObjectwindow.mxClient.NO_FO = true; 这样标签 div 在 SVG 之外，它的位置是正确的，但是它的包装 div 丢失了它的尺寸，所以标签不可见。

要点：

  1. 使用 draw.io 创建图表，然后使用 mxGraph 显示。
  2. 标签值将随着 mxValueChange 事件发生变化，并且动画不应在更改后重置。

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

4

0 回答 0