1

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

https://jsfiddle.net/dx7uryob/

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

从：

在此处输入图像描述：

将“任务”标签旋转 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,-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,-20) rotate(-90,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>

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

4

1 回答 1

0

我已经使用 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,-20) rotate(-90,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>

于 2021-03-31T11:58:01.527 回答