我尝试使用svg
rect
标记创建圆角边缘。但是rx
和ry
正在四条边上形成圆角。相反,我试图只创建两条边(左上角和右上角)。我使用path
命令(Working 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>
EDITED
以下代码将给出我预期的圆角。我使用了Cubic Curve方法。
<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>
我的问题/问题是当我在路径中创建动画时,高度不随动画而增长。
答案 0 :(得分:5)
您可以使用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);
}
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;opacity:1" />
<rect x="50" y="40" rx="0" ry="0" width="150" height="130" style="fill:red;opacity:1" />
Sorry, your browser does not support inline SVG.
</svg>
这有点棘手,这将完成工作。这是一个样本,所以你也可以和你的一样。
答案 2 :(得分:0)
对于只有顶部的圆角,您可以在css中使用它
border-top-left-radius
border-top-right-radius
以下是一个示例。
img{ width:100%;
height:100%;
border-top-left-radius:20px;
border-top-right-radius:20px;
}
&#13;
<img src="http://wallpaperswide.com/download/color_splash_effect-wallpaper-1366x768.jpg">
&#13;