专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

5分钟搞懂SVG画图 svg绘制

ins518 2024-10-04 02:16:28 技术文章 42 ℃ 0 评论

【写在最前】
我们在平时的前端编程学习中，经常会接触到“网页绘图”这个概念；

目前，前端绘图业界有两大主流技术：canvas 和 svg

之前，我们已经花5分钟时间搞懂了第一个：canvas，详见 5分钟搞懂canvas画图

今天，让我们花5分钟时间再搞懂另一个：SVG

通过本文知识，相信聪明的你，看完一定会有收获！

为了最好的学习效果，我们直接将之前的canvas效果图，用SVG技术重新实现一遍，如下图所示：


SVG 基本概念

定义：是一种通过xml语言定义格式的可缩放矢量图形（Scalable Vector Graphics的缩写）

兼容性：所有现代浏览器，IE9.0+


SVG 语法学习

废话不多说，直接看语法代码：（每一行都有注释，确保也能小白完全掌握）

<body>
    <!--定义一个SVG图片的尺寸-->
    <svg xmlns="http://www.w3.org/2000/svg" width="600" height="300">

        <!--画SVG边框-->
        <rect width="600" height="300" stroke="#ccc" stroke-width="1" fill="white"/>
        <!--画绿色边框矩形-->
        <rect x="50" y="50" width="100" height="50" stroke="#00ff00" stroke-width="1" fill="white"/>
        <!--画蓝色实心矩形-->
        <rect x="200" y="50" width="100" height="50" stroke="blue" stroke-width="1" fill="blue"/>
        <!--画红色渐变矩形-->
        <defs>
            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1"/>
                <stop offset="100%" style="stop-color:#ff0000;stop-opacity:1"/>
            </linearGradient>
        </defs>
        <rect x="350" y="50" width="100" height="50" fill="url(#grad1)"/>
        <!--画红色圆形-->
        <circle cx="550" cy="75" r="30" fill="red"/>
        <!--画红色线段-->
        <line x1="200" y1="280" x2="400" y2="280" stroke="red"/>
        <!--写一段文本-->
        <text x="180" y="250" fill="red" font-familay="Arial" font-size="30">Hello Html5 SVG</text>
        <!--内嵌一张图片-->
        <image x="300" y="150" width="50" height="50" xlink:href="avatar.png"/>
    </svg>

    </body>


【全文完】
--------------------------------
十年技术沉淀，只做原创文章；
及时关注作者，成就大牛之路！

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表