svg简单使用

最新推荐文章于 2021-01-10 15:50:39 发布

Vivian_shuang

最新推荐文章于 2021-01-10 15:50:39 发布

阅读量464

点赞数

分类专栏： canvas 文章标签： svg

本文链接：https://blog.csdn.net/Vivian_shuang/article/details/52677555

版权

canvas 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<svg width="500" height="500">
    <!--矩形-->
    <rect x="10" y="10" width="30" height="30" stroke="pink" fill="yellow" stroke-width="5" id="rect"></rect>
    <!--圆角矩形-->
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="red" fill="blue" stroke-width="5"></rect>
    <!--圆-->
    <circle cx="25" cy="75" r="20" stroke="blue" fill="gold" stroke-width="5"></circle>
    <!--椭圆-->
    <ellipse cx="75" cy="75" rx="20" ry="15" stroke="#00ADEE" fill="#A2DE26" stroke-width="5"></ellipse>
    <!--直线-->
    <line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"></line>
    <!--折线-->
    <polyline points="60 110,65 120,70 115,75 130,80 125,85 140" stroke="orange" stroke-width="5"></polyline>
    <!--多边形-->
    <polygon points="50 160,55 180,70 180,60 190,65 205,50 195,35 205,40 190,30 180,45 180" stroke="gold" fill="yellow" stroke-width="5"></polygon>
    <!--路径-->
    <path d="M20,230 Q40,205 60,230 T90 230" stroke="red" fill="none" stroke-width="5"></path>
</svg>
<script>
    var rect = document.getElementById("rect");
    rect.onclick = function () {
        this.style.width = 50;
        this.style.stroke = "blue";
    }
</script>
</body>
</html>

Vivian_shuang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
svg简单使用

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle>head>body>svg width="500" height="500"> rect x="10" y="10" width="30" height="30" stroke="pink" fill="yellow" str
复制链接

扫一扫

专栏目录