我正在尝试使用 svg
rect
标签创建圆边。但是 rx
和 ry
是在四个边缘中制作圆边。相反,我试图只创建两个边缘(左上角和右上角)。我用 path
命令做了同样的事情(工作 JS Fiddle )。
创建 rect 的原因是我试图创建动画生长高度。
<rect x="50" y="0" fill="#f00" width="100" height="100">
<animate attributeName="height" from="0" to="100" dur="0.5s" fill="freeze" />
</rect>
已编辑
下面的代码会给出我所期望的圆 Angular 。我使用了三次曲线法。
<svg style="width:500px; height:800px;">
<path class="draw" d="M 75 445 L75 116.66666666666669 C 80 91.66666666666669 120 91.66666666666669 125 116.66666666666669 L125 445 75 445" style="stroke: rgb(192, 31, 31); stroke-width: 2px; fill: rgb(216, 62, 62);"></path>
</svg>
我的问题是当我在路径中创建动画时,高度没有随着动画而增长。
您可以使用 CSS3 的 scaleY()
转换来创建所需的动画。
最初你的 path
将有 scaleY(0)
值(它的行为就像元素有 height: 0
)我们将动画它到 scaleY(1)
。
为此需要以下 CSS:
path {
transform: scaleY(0);
transform-origin: center bottom;
animation: draw 1.5s linear forwards;
}
@keyframes draw {
to {
transform: scaleY(1);
}
}
工作演示:
.draw {
animation: draw 1.5s linear forwards;
transform-origin: center bottom;
stroke: rgb(192, 31, 31);
fill: rgb(216, 62, 62);
transform: scaleY(0);
stroke-width: 2px;
}
@keyframes draw {
to {
transform: scaleY(1);
}
}
<svg width="400" height="200">
<path class="draw"
d="M 75 200 L75 25 C 80 0 120 0 125 25 L125 200 75 200" />
</svg>
我是一名优秀的程序员,十分优秀!