百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML 游戏HTML5 支持CSS 谷歌字体
当前位置：网站首页 > 技术文章 > 正文

5分钟搞懂SVG画图 svg绘图工具

myzbx 2024-12-26 15:15 12 浏览

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

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

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

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

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

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


SVG 基本概念

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

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


SVG 语法学习

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

Bash
<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>


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

相关推荐

疯鸟开发者又杀回来了 虐心游戏《旋转直升机2》周四上架

寿司发表于2015-12-1616:34想必有不少玩家都曾被“自虐神作”FlappyBird《疯狂的小鸟》给“虐待”过，而继这款休闲游戏之后，其制作人越南大叔DongNguyen又再度...

暴雪游戏新服务，游戏时间自由转!

宝子们，暴雪游戏服务中心推出了一项超级人性化的新服务！很多像我们这样的玩家，有好多子账号，或者同一身份证下有多个战网账号。有时候就想看看小号，还得充值，真的太亏啦！但是现在不用愁啦，新服务可以在...

Maybe Test |《旋转冲击波》游戏体验

点击“MaybeTest”关注我们，每天都有最火爆的游戏体验报告!《旋转冲击波》游戏体验微信号：MaybeTest旋转冲击波（OneMoreDash）是一款简单的休闲游戏，游戏中的设计可谓简单，虽...

从翻花绳到数字游戏:童年乐趣的变迁与联机时代的到来

在当今这个科技飞速发展的时代，许多曾经简单而纯粹的游戏逐渐被高科技产品所取代。然而，最近一段时间，一段关于女孩们在课间玩翻花绳的视频引发了网友们的热议，大家纷纷感慨：“越来越高级了，小时候我都是用手玩...

旋转横条新游曝光 旋转十字连线唯美画面

GingearStudio是由仅有几个人组成的独立制作团队，而这款休闲游戏OpenBar《旋转横条》便是它们的处女作。该作以简朴的画风为主，搭配模拟水珠气泡流动的游戏背景而打造，令整个游戏都...

Glozzle 旋转解谜攻略大全 旋转注意方可过

Glozzle旋转解谜里面我们需要通过一些办法才能够更为巧妙的结合出我们所需要的图形，究竟接下来我们该如何解决这一切的谜题呢？一起来看下本篇Glozzle旋转解谜攻略大全是如何做到的吧。Glozz...

烧脑解谜游戏《棱镜》上架 几何旋转连线拼凑核心

寿司发表于2016-02-1417:33以简单的图形结合不复杂玩法的几何游戏想必不少玩家都会有所接触，但这款_PRISM《棱镜》却用烧脑的玩法搭配变化多端的几何图形来呈现出不一样的烧脑解谜游戏...

索尼新专利“旋转椅”曝光! 全方位体验VR游戏

集微网消息，近日有玩家就发现了一款由索尼申请的PSVR新专利，能让玩家享受全方位沉浸式VR体验的新设备——“旋转椅”，有了它，玩家就能在VR游戏中旋转跳跃不停歇。从专利示意图给出的备注来看，序号“10...

能旋转的塔防游戏? 睡意侵袭试玩体验

最近优秀的塔防游戏可真是不少，大家现在肯定都在关注着《王国保卫战：起源》何时来到安卓平台，小编也跟大家一样很期待这款神作，在漫长的等待时间里，小编要为大家推荐一款比较另类的塔防游戏，它就是《睡意侵袭》...

Unity2D游戏制作教程 | 8.设置基本输入系统并实现人物移动

我们操作玩家的按键在新版本的unity中是可以更改的，默认是wasd，但是在新版本中可以实现更换按键，我们可以来试一下，通过代码实现玩家在按键的控制下移动。在Unity中如何通过代码控制人物的基本移动...

这是勇敢者的游戏!你不来试一下?

滑雪勇敢者的游戏想要征服长长的雪道先得经历一次次摔倒又一次次站起……你以为我们是来介绍赛事的其实我们是来送欢乐的动动手指和天南地北的网友来场刺激的“雪上疾行”https://pd.xinhua-new...

正惊GIF:智慧改变生活!一个小操作，板车变成自动旋转餐桌?

大家好，这里是正惊游戏，我是你们的正惊小弟。前方高能预警，每周二准时更新的GIF毫无尿点，请君一看……GIF图片较大，手机端请在Wifi情况下查看。工作人员一个月来毫无进展个子矮还是衣服太长不行，我一...

如何手动增加东皇太一魔法球回血频率?顺时针旋转走位是最优选择

东皇太一顺时针旋转走位无非是为了提升一技能魔法球接触敌方单位的频率，以此触发更强大的恢复效果。东皇一技能回血量取决于魔法球的触碰次数东皇的一技能最多可创造同时存在的三颗魔法球，辅以被动的回血特性，命中...

是躺是站由你决定 休闲游戏《翻转河马》考验你瞬间反应

寿司发表于2015-12-2417:55因为可爱和滑稽的形象，所以部分动物形象都一直被众多游戏制作商当作吸引女性玩家的重要元素，而在这款由游戏制作商Ketchapp发布的休闲游戏FlipHi...

Taito公布迷你街机 配有可旋转屏幕和轨迹球手柄

近年来诸多游戏厂商均在复刻复古游戏机，而Taito今天也成为了其中之一。Taito作为游戏行业老牌游戏厂商，旗下有《太空侵略者》、《泡泡龙》等经典街机游戏。今天他们公布了全新的迷你街机：EgretI...

一周热门
最近发表
标签列表