HTML5 新特性之四---SVG绘图(可缩放的矢量图)

最新推荐文章于 2024-04-02 23:18:24 发布
最新推荐文章于 2024-04-02 23:18:24 发布
阅读量894 收藏 3
点赞数
分类专栏： HTML+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zh__quan/article/details/97498401
版权

 

 

 

 

 

canvas绘图

svg绘图

类型

2D位图

2D矢量图

如何绘图

使用JS代码绘图

使用标签绘图

事件绑定

每个图形不是元素，无法直接绑定事件

每个图形都是元素，可以直接绑定事件监听

应用场合

游戏；特性

图标；地图

1.直接在HTML文档，使用SVG标准

<svg></svg> 本身一个 300 * 150 inline-block

矩形<rect>

圆形<circle>

椭圆<ecllipse>

直线<line>

折现<polyline>

多边形<polygon>

1.SVG绘图--矩形

<rect width="" height="" x="" fill="" fill-opacity="" stroke="" stroke-width="" stroke-opacity=""></rect>

    <h1>svg事件监听绑定</h1>
    <svg id="s2" width="500" height="400">
        <rect id="r2" width="50" height="1" x="235" y="350" fill="#faa" fill-opacity="0.3" stroke="#800" stroke-opacity="0.3"></rect>
    </svg>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>svg创建元素</h1>
    <svg id="s2" width="500" height="400"></svg>

    <script>
        var data=[
            {"label":"部门1","value":300},
            {"label":"部门2","value":310},
            {"label":"部门3","value":200},
            {"label":"部门4","value":190},
        ];
        for (var i=0;i<data.length;i++){
            var dept = data[i];
            var rect = document.createElementNS("http://www.w3.org/2000/svg","rect");
            rect.setAttribute("width",50);
            rect.setAttribute("height",dept.value);
            rect.setAttribute("y",400-dept.value);
            rect.setAttribute("x",(i*100)+50);
            rect.setAttribute("fill",rc());
            s2.appendChild(rect)
        }
        function rc() {
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            return `rgb(${r},${g},${b})`;
        }
    </script>
</body>
</html>

2.SVG绘图--圆形

<circle cx="" cy="" r="" fill="" fill-opacity="" stroke="" stroke-opacity=""></circle>

3.SVG绘图--椭圆

<ellipse cx="" cy="" rx="" ry=""></ellipse>
rx:水平半径
ry:垂直半径

4.SVG绘图--直线

<line x1="" y1="" x2="" y2="" stroke="" stroke-width="" stroke-linecap="round;square;butt"></line>

5.SVG绘图--折线

<polyline points="50,50 100,55 ..." stroke="#000" fill="transparent"></polyline>

6.SVG绘图--多边形

<polygon points="50,50 100,55 ..." stroke="#000" fill="transparent"></polygon>

7.SVG绘图--文本

<text font-size="" fill="" stroke="" x="" y="" alignment-baseline="before-edge">文本内容</text>

8.SVG绘图--图像

<image xlink:href="x.png" width="" height="" x="" y=""></image>

9.SVG绘图--渐变对象

<defs>    定义特效对象:渐变对象定义标签内
    <linearGradient id="g3" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="red"></stop>
        <stop offset="100%" stop-color="purple"></stop>
    </linearGradient>
</defs>
<ANY fill="url(#g3)" stroke="url(#g3)"></ANY>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            text-align: center;
        }
        svg{
            background: #ddd;
        }
    </style>
</head>07_h5_svg.html
<body>
    <h1>svg创建元素</h1>
    <svg id="s2" width="500" height="400">
        //渐变对象属于一种特效对象
        <defs>
            <linearGradient id="g3" x1="0%" y1="0%" x2="100%" y2="0%">
                <stop offset="0%" stop-color="red"></stop>
                <stop offset="17%" stop-color="orange"></stop>
                <stop offset="34%" stop-color="yellow"></stop>
                <stop offset="51%" stop-color="green"></stop>
                <stop offset="68%" stop-color="cyan"></stop>
                <stop offset="85%" stop-color="blue"></stop>
                <stop offset="100%" stop-color="purple"></stop>
            </linearGradient>
        </defs>
        <rect width="400" height="100" x="50" y="150" fill="url(#g3)"></rect>
        <text font-size="60" y="300" fill="url(#g3)">一段文本</text>
    </svg>
</body>
</html>

10.SVG绘图--滤镜

<defs>
    <filter id="f2">
        <feGaussianBlur stdDeviation="3"/>
    </filter>
    <ANF filter="url(#f2)">
</defs>

 

 

zh__quan
关注
专栏目录
HTML5SVG绘图
Giraffe
08-28 1081
Document body { text-align: center; } svg { background: #f2f2f2; } 绘制矩形 r1.onmousemove = function() { this.setAttribute("fill","rgba(0,0,255,.3)"); }
HTML5 SVG: 探索矢量图形的新纪元
最新发布
csbysj2020的博客
07-02 530
SVG，即可缩放矢量图形（Scalable Vector Graphics），是一种基于XML的图像格式，用于描述二维矢量图形。与传统的位图图像（如PNG、JPEG）不同，SVG图像由直线、曲线、矩形、圆形等几何形状组成，这些形状可以通过数学公式来描述，因此可以无限放大而不失真。
html svg画图
qianbo042311的博客
03-15 473
无废话，基础的svg画法，慢慢更新 <!DOCTYPE html> <!-- * Copyright (c) 2015 The WebRTC project authors. All Rights Reserved. * * Use of this source code is governed by a BSD-style license * that can be found in the LICENSE file in the root of the source *
html技术： 用svg标签画图
全易
04-03 967
如同canvas一样，svg标签是个画布(容器)，用来放图 <!-- 必须初始化宽高，要不然看不见了 --> <svg width="600px" height="400px" style="border: 1px solid red;margin: 100px"> <!-- 放画的图 --> </svg> 输出直线： 效果： 输出...
svg在html中动态画图
Garnett_zk的博客
10-20 1151
系列文章目录 svg在html中动态画图系列文章目录前言一、目标二、实现目标1. 赋值给下拉框2查询svg图需要的数据总结 前言 本系列文章主要记录项目过程中重点的项目技术 一、目标 通过下拉框隧道的名称，改变下方svg图的内容，通过定时器，定时查询隧道的信息，从而定时更改svg图，具体见下图图文说明 二、实现目标 1. 赋值给下拉框 1.定义下拉框 <div>请选择隧道<select id="rolltype" onchange="callMsg()"></sel
svg核心包,用于HTML画图
10-14
主要通过html、css、js、svg等实现了彩票的数据走势图，主要利用空闲时间学习了下，请勿作为他用！svg.js
svg-edit.rar_javascript SVG_js绘图_svg editor js_svg 组态 html_svg-
09-19
SVG（Scalable Vector Graphics）是一种基于XML的矢量图像格式，它允许通过纯文本代码创建和编辑图形，因此在Web开发中非常受欢迎，尤其是在需要高质量、可缩放的图形时。JavaScript SVG库则提供了与SVG图形进行交互...
Html5之svg可缩放矢量图形_动力节点Java学院整理
09-28
SVG的出现填补了在Web上缺少一个可交互、可缩放的矢量图形格式的空白。它为Web设计者和开发者提供了一个强大的工具，用于创建高质量的图形内容，同时保持了内容的可访问性和可维护性。随着Web技术的不断进步，SVG在...
svg2ass:SVG2ASS-将SVG矢量图形转换为ASS字幕绘制指令
05-09
将SVG矢量图形转换为ASS字幕绘制指令。 概述 SVG2ASS接收SVG文件，并放下ASS对话框行，准备粘贴到例如Aegisub中。 仅支持一组基本的SVG功能，而大多数更高级的功能都将被忽略。 您可以通过将所有对象转换为路径并尽...
图形的可缩放矢量图形 (SVG) 导出：将 3D 和 2D MATLAB 绘图转换为可缩放矢量格式 (SVG)。-matlab开发
05-31
图形的可缩放矢量图形 (SVG) 导出 将 2D 和 3D Matlab 绘图转换为可缩放矢量格式 (SVG)。 此格式由 W3C ( http://www.w3.org ) 指定，可以使用 Internet 浏览器查看和打印。 添加了对超出 Matlab 功能的过滤器、...
HTML5新特性之用SVG绘制微信logo
09-28
SVG（可缩放矢量图形）是一种基于XML的图形格式，用于描述二维矢量图形，常用于Web页面，可以无损放大缩小，并且可以使用JavaScript和CSS进行动态操作。本篇文档将重点介绍HTML5中与SVG有关的新特性，并通过绘制微信...
使用HTML5进行SVG矢量图形绘制的入门教程
09-28
主要介绍了使用HTML5进行SVG矢量图形绘制的入门教程,包括基本图形的绘制和简单的渐变效果等介绍,注意旧版本IE对其的支持并不好,需要的朋友可以参考下
SVG画图工具，整套源码
04-23
SVG画图工具是一个基于网络的免费和开源矢量图形编辑器。 它可用于从Web浏览器内创建和编辑可缩放矢量图形（SVG）图像，而不需要额外的软件安装。
【H5】 svg可缩放矢量图形标签
舜岳的博客
05-31 691
【H5】 svg可缩放矢量图形标签 <svg xmlns="http://www.w3.org/2000/svg" width='100%' height='100%'></svg> circle 画圆： <svg xmlns="http://www.w3.org/2000/svg" width='500' height='500'> <!--...
html文件中实现svg图的绘制
m0_69839414的博客
03-28 299
此svg绘制功能是在一个html文件中实现，并未对函数进行封装。
AJAX + SVG 实现实时监控图表
baggio785的专栏
06-18 3130
皮 振华2006 年 6 月 15 日 AJAX 已经有很多文章介绍它的原理及其应用了。但是遗憾的是现在并没有很多结合实际项目应用。本文结合实际项目中的应用来讲述利用 AJAX 和SVG 技术如何创建各种激动人心的功能，并附带可以运行的例子和源代码。本文需要一定的 AJAX，SVG 知识和应用经验。当然它们都可以在 ibm.com/developerworks/cn 上找到。个
HTML5的SVG绘图笔记2：绘制SVG基本图形
YanHSama的博客
02-03 565
矩形
【HTML】制作一个简单的动态SVG图形
qq_70814008的博客
04-02 2078
无需多言，本文将详细介绍一段HTML和CSS代码，该代码用于创建一个动态的SVG图形，具体内容如下：整体而言，这段代码展示了如何使用HTML和CSS创建一个动态的、响应式的网页图形。HTML部分负责定义网页的结构和内容，特别是SVG图形的创建和动画的设置。CSS部分则负责美化网页，设置背景颜色和图形的布局。通过这段代码，我们可以看到SVG的强大功能，不仅可以创建复杂的图形，还可以通过动画创造出动态的效果。同时，CSS的使用确保了图形的响应性和美观性，使得网页在不同设备和屏幕尺寸上都能提供良好的用户体验。
【HTML5】svg 绘制图形
qq_45677671的博客
06-30 4515
SVG 绘制图形教程
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值