带有 SVG 的任务时间线 - 无法为最终过渡设置动画

编程问答 2022-05-16

问题描述

我正在尝试以通用方式生成编码为 SVG 的任务时间线，并设法做到这一点：

https://jsfiddle.net/dx7uryob/

剩下要做的是以下动画（在任何任务点上）：

来自：

enter image description here

：

“任务”标签旋转 90 度，直到完全水平显示并居中在任务点上方。我设法通过将 rotate(90,x+45,y) 添加到相应 transform 标记的 <text> 属性中来做到这一点，但是当我使用 svg text { transition: transform 1s; } 时，它无法逐渐旋转。

我真的很想知道如何制作动画（也在 IE 中工作，所以我猜 animateTransform 不是一个选项..？）。

然后，最后一步是在旋转的“任务”标签下方混合第二个标签，理想情况下将不透明度设置为 1 以逐渐使其出现/消失。为此，我什至不知道如何在 SVG 中的第一个文本标签下方放置第二个文本标签。

关于解决方案；我真的更喜欢坚持使用 SVG，因为我在代码片段中复制的解决方案可以以通用方式生成，然后可以随意缩放；只是最后两件不见了，我找不到了。

.label-below-task-point {
    text-anchor: end;
}
<svg version="1.1" baseProfile="full" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" id="timeline-container">
    <line x1="11" x2="200" y1="11" y2="142.2" stroke="black" />
    <line x1="200" x2="400" y1="142.2" y2="121" stroke="black" />
    <line x1="400" x2="600" y1="121" y2="167.6" stroke="black" />
    <line x1="600" x2="989" y1="167.6" y2="11" stroke="black" />
    <rect stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="11" transform="translate(-10,-10)" />
    <text x="11" y="11" transform="translate(6,20) rotate(-90,11,11)" class="label-below-task-point">task</text>
    <rect stroke="black" stroke-width="2" fill="white" width="20" height="20" x="200" y="142.2" transform="translate(-10,-10)" />
    <text x="200" y="142.2" transform="translate(6,-20) rotate(-90,200,142.2)" class="label-above-task-point">task</text>
    <rect stroke="black" stroke-width="2" fill="white" width="20" height="20" x="400" y="121" transform="translate(-10,-10)" />
    <text x="400" y="121" transform="translate(6,400,121)" class="label-above-task-point">task</text>
    <rect stroke="black" stroke-width="2" fill="white" width="20" height="20" x="600" y="167.6" transform="translate(-10,-10)" />
    <text x="600" y="167.6" transform="translate(6,600,167.6)" class="label-above-task-point">task</text>
    <rect stroke="black" stroke-width="2" fill="white" width="20" height="20" x="989" y="11" transform="translate(-10,-10)" />
    <text x="989" y="11" transform="translate(6,989,11)" class="label-below-task-point">task</text>
</svg>

我在这里使用画布会更好吗？我没有这方面的经验，但我想知道这是否是我正在尝试做的更好的选择..

解决方法

我已经使用 transform-origin 为第二个文本 task2 解决了这个问题：

.label-below-task-point {
    transform: rotate(90deg);
    transition: transform 1s;
}

.label-below-task-point:hover {
    transform: rotate(0deg);
}
<svg version="1.1" baseProfile="full" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" id="timeline-container">
    <line x1="11" x2="200" y1="11" y2="142.2" stroke="black" />
    <line x1="200" x2="400" y1="142.2" y2="121" stroke="black" />
    <line x1="400" x2="600" y1="121" y2="167.6" stroke="black" />
    <line x1="600" x2="989" y1="167.6" y2="11" stroke="black" />
    <rect stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="11" transform="translate(-10,-10)" />
    <text x="11" y="11" class="label-below-task-point">task</text>
    <rect stroke="black" stroke-width="2" fill="white" width="20" height="20" x="200" y="142.2" transform="translate(-10,-10)" />
    <text x="180" y="125" transform-origin="199px 120px" class="label-below-task-point">task2</text>
    <rect stroke="black" stroke-width="2" fill="white" width="20" height="20" x="400" y="121" transform="translate(-10,-10)" />
    <text x="400" y="121" transform="translate(6,-20) rotate(-90,400,121)" class="label-above-task-point">task</text>
    <rect stroke="black" stroke-width="2" fill="white" width="20" height="20" x="600" y="167.6" transform="translate(-10,-10)" />
    <text x="600" y="167.6" transform="translate(6,600,167.6)" class="label-above-task-point">task</text>
    <rect stroke="black" stroke-width="2" fill="white" width="20" height="20" x="989" y="11" transform="translate(-10,-10)" />
    <text x="989" y="11" transform="translate(6,20) rotate(-90,989,11)" class="label-below-task-point">task</text>
</svg>

css-transitionshtmlsvgsvgsvgsvg-transforms