HTML5绘制矩形

HTML5中使用内嵌SVG显示矩形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>svg demo</title>
</head>
<body>


<svg width="500" height="500" style="background-color: #398439" version="1.1" xmlns="http://www.w3.org/2000/svg">


    <rect width="300" height="100" rx="20" ry="20" style="fill:yellow;stroke-width:3;stroke:red"/>


</svg>
</body>
</html>




rect标签参数解析:

    rect 元素的 width 和 height 属性可定义矩形的高度和宽度,现在给矩形的宽为300,高为100
    style 属性用来定义 CSS 属性
    CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值)
    CSS 的 stroke-width 属性定义矩形边框的宽度
    CSS 的 stroke 属性定义矩形边框的颜色
    rx和ry为圆角,不设置时默认直角


HTML5绘制矩形_第1张图片

你可能感兴趣的:(html,svg,svg,嵌入,矩形,HTML5绘制矩形)