可视化系列讲解：SVG绘制基本图形及如何复用

最新推荐文章于 2024-05-10 12:42:21 发布
最新推荐文章于 2024-05-10 12:42:21 发布
阅读量2.1k 收藏 5
点赞数
分类专栏： css svg 文章标签： 前端 SVG 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangyuiba1314/article/details/128597215
版权
css 同时被 2 个专栏收录
7 篇文章 1 订阅
订阅专栏
svg
6 篇文章 0 订阅
订阅专栏

文章目录

一、SVG坐标系

在这里插入图片描述
SVG 使用的坐标系统（网格系统）和 Canvas的差不多。坐标系是 以左上角为 (0,0) 坐标原点，坐标以像素为单位，x 轴正方向
是向右，y 轴正方向是向下。

◼ svg元素默认宽为 300px, 高为 150px。如右图所示，svg元素默认被网格所覆盖。
◼ 通常来说网格中的一个单元相当于 svg 元素中的一像素。
◼ 基本上在 SVG 文档中的 1 个像素对应输出设备（比如显示屏）上的 1 个像素（除非缩放）。
◼svg元素和其它元素一样也是有一个坐标空间的，其原点位于元素的左上角，被称为初始视口坐标系
◼ svg的 transform 属性可以用来移动、旋转、缩放SVG中的某个元素，如svg中某个元素用了变形，该元素内部会建立
一个新的坐标系统，该元素默认后续所有变化都是基于新创建的坐标系统。

二、SVG坐标系单位

SVG坐标系统，在没有明确指定单位时，默认以像素为单位
在这里插入图片描述

三、SVG绘制基本图形

SVG所支持的基本形状有：矩形、圆形、椭圆、线条、折线、多边形、路径。

3.1 矩形

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    svg {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  <svg
    width="300"
    height="300"
  >
    <rect x="0" y="0" width="100" height="50"></rect>
    <rect x="100" y="100" width="100" height="50" rx="20" ry="20"></rect>

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

3.2 圆形

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    svg {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  <!-- cx="100" cy="100" 圆心 -->
  <!-- r="50" 半径 -->
  <svg
    width="300"
    height="300"
  >
    <circle cx="100" cy="100" r="50" fill="red"></circle>

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

下面的图形不在贴图，可自己尝试

3.3 椭圆

<svg
    width="300"
    height="300"
  >
    <ellipse cx="100" cy="100" rx="50" ry="100" fill="red"></ellipse>

  </svg>

3.4 直线

<svg
    width="300"
    height="300"
  >
    <line x1="100" y1="100" x2="200" y2="100" stroke="red" stroke-width="10"></line>

  </svg>

3.5 折线

<svg
    width="300"
    height="300"
  >
    <polyline points="20 10, 80 50, 20 90" fill="transparent" stroke="red"></polyline>
  </svg>

3.6 多边型

<svg
    width="300"
    height="300"
  >
    <polygon points="20 0, 80 50, 20 100" fill="transparent" stroke="red"></polygon>
  </svg>

3.7 路径

<svg
    width="300"
    height="300"
  >
    <!-- <path
      d="M 20 0, 80 50, 20 100"
    >
    </path> -->

    <!-- <path
      d="M 20 0, 80 50, 20 100"
      fill="transparent"
      stroke="red"
    >
    </path> -->

    <!-- 闭合的三角 -->
    <path
      d="M 20 0, 80 50, 20 100, Z"
      fill="transparent"
      stroke="red"
    >
    </path>



  </svg>

3.8 文字

<svg
    width="300"
    height="300"
  >
    <text x="100" y="100" font-size="50" fill="red" text-anchor="middle" dominant-baseline="middle">XT</text>
  </svg>

3.9 图片

<svg
    width="300"
    height="300"
  >
    <image 
      href="你的图片地址"
      x="10"
      y="10"
      width="100"
      height="100"
    >
    </image>
  </svg>

四、SVG元素的组合

<svg
    width="300"
    height="300"
  >
    <!-- <circle cx="50" cy="50" r="25" fill="transparent" stroke="red"></circle>
    <circle cx="80" cy="50" r="25" fill="transparent" stroke="red"></circle>
    <circle cx="110" cy="50" r="25" fill="transparent" stroke="red"></circle>
    <circle cx="140" cy="50" r="25" fill="transparent" stroke="red"></circle> -->

    <!-- g元素没有专有属性，只有全局属性（class style fill ....） -->
    <g fill="transparent" stroke="red">
      <circle cx="50" cy="50" r="25"></circle>
      <circle cx="80" cy="50" r="25"></circle>
      <circle cx="110" cy="50" r="25"></circle>
      <circle cx="140" cy="50" r="25"></circle>
    </g>
  </svg>

五、图形元素定义复用和使用定义的复用

5.1 defs与use

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    svg {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  <svg
    width="300"
    height="300"
  >
  <!-- 定义可复用的内容 -->
    <defs>
      <style>
        rect {
          fill: red
        }
      </style>

      <rect id="rectangle" x="0" y="0" width="100" height="50" ></rect>

      <g id="circleGroup" fill="transparent" stroke="red">
        <circle cx="50" cy="50" r="25"></circle>
        <circle cx="80" cy="50" r="25"></circle>
        <circle cx="110" cy="50" r="25"></circle>
        <circle cx="140" cy="50" r="25"></circle>
      </g>
    </defs>

    <!-- 用use复用 -->
    <!-- <use href="#rectangle"></use> -->
    <!-- <use x="10" y="10" href="#rectangle"></use> -->

    <!-- <use href="#circleGroup"></use> -->
    <!-- <use x="100" y="100" href="#circleGroup"></use> -->
  </svg>

  <svg
    width="300"
    height="300"
  >
    <use href="#circleGroup"></use>
  </svg>

  <svg
    width="300"
    height="300"
  >
    <use href="#rectangle"></use>
  </svg>
</body>
</html>

5.2 symbol与use

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    svg {
      background-color: rgba(255, 0, 0, 0.1);
    }
  </style>
</head>
<body>
  <svg
    width="300"
    height="300"
    style="display: none;"
  >
    <symbol id="per" viewBox="0 0 100 100">
      <path d="M 80 0, 20 50, 80 100, Z"></path>
    </symbol>

    <symbol id="next" viewBox="0 0 100 100">
      <polygon points="20 0, 80 50, 20 100"></polygon>
    </symbol>

    
  </svg>
  
  <svg width="300" height="300">
    <!-- 复用 -->
    <use width="100" height="100" href="#per"></use>
  </svg>

  <svg width="100" height="100">
    <!-- 复用 -->
    <use href="#next"></use>
  </svg>

</body>
</html>
你的微笑暖暖的
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
svg图形的绘制
sh2001824的博客
07-16 4822
svg图形的绘制
canvas SVG简介及绘制图形
m0_74022688的博客
12-19 1805
Canvas 表示画布，现实生活中的画布是用来作画的。HTML5 中的 Canvas ：我们可以称它为“网页中的画布”。默认情况下，Canvas 是一块 300px*150px 的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。利用 Canvas 实现绘画：Canvas 并不是通过鼠标绘画的，而是用户需要通过 JavaScript 来控制画布中的内容，例如添加图片、线条、文字等。SVG 英文全称为 Scalable Vector Graphics，意思为可缩放的矢量图。
良哥汇总：WEB基于SVG图形绘制——手把手教你完成矢量示意图绘制
最新发布
hualinger的博客
05-10 1204
SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 是一种用于描述二维图形的 XML 标记语言，与位图图像不同，SVG图像以文本形式存储，并且可以缩放到任意大小而不会失真，因为它们基于数学描述而不是像素。 SVG 图形是可伸缩的，无需分辨率依赖，这意味着它们可以在不失真的情况下被放大或缩小。 SVG 广泛应用于网页设计、图标制作、数据可视化和其他图形相关的领域。SVG 的主要特点 矢量图形：SVG 使用基于路径的矢量图形，这意味着图形可以无限放大而不失真。 可伸缩性：S
【HTML5】svg 绘制图形
qq_45677671的博客
06-30 4069
SVG 绘制图形教程
svg动画图形绘制
weixin_45441173的博客
01-19 1436
svg动画图形绘制
02——svg绘制基本图形，了解常用的属性
weixin_42289080的博客
11-23 2459
多个坐标点的位置集合，傻瓜式写坐标就行，以此类推。重要的是，在svg坐标系中，x轴正方向。这个定义就很简单了，数学上两个点的坐标。然后一起学习下各个图形的属性用法。：与多线段类似，区别是。连起来，形成封闭图形。
数据可视化实战使用D3设计交互式图表.pdf+源码
03-16
数据可视化是一种将复杂的数据集转化为易于理解的图形或图像的过程，它在数据分析、决策制定以及信息传达中扮演着至关重要的角色。本资源是关于“数据可视化实战：使用D3设计交互式图表”的教程，结合了理论知识与...
html5 svg绘制笑脸动画特效
11-07
HTML5和SVG（Scalable Vector Graphics）是现代网页开发中的核心技术，它们为网页设计师...在实际项目中，SVG与HTML5的结合不仅可以用于创建有趣的动画，还能在响应式设计、图标系统和数据可视化等方面发挥巨大作用。
keshihua:可视化学习
04-19
03 | 声明式图形系统：如何用SVG图形元素绘制可视化图表？ 02 | 指令式绘图系统：如何用Canvas绘制层次关系图？ 01 | 浏览器中实现可视化的四种方式 路线 要点 图形基础：带你熟悉HTML/CSS、SVG、Canvas2D和WebGL这...
精通D3.js：交互式数据可视化高级编程1
08-03
在了解D3.js之前，先要理解数据可视化的基本概念。数据可视化的目标是通过图形的方式将复杂数据呈现出来，帮助用户更好地理解和分析数据。其构成要素包括数据、视觉表示和交互。常见的图表种类有柱状图、饼图、折线...
简单的数据可视化页面9.zip
07-16
在本项目"简单的数据可视化页面9.zip"中，我们将探讨如何使用原生JavaScript技术来创建交互式的数据可视化页面。这个项目特别适合初学者，旨在帮助他们掌握基础的图表开发技能，如柱状图、饼状图以及地图的可视化。...
svg绘制六种基本形状
晴空闲云
10-12 1807
svg 意为可缩放矢量图形（Scalable Vector Graphics），最大的特点就是伸缩不会失真。 svg是用xml进行描述的，在前端方面现在应用越来越广泛，各大浏览器支持越来越好了。
Svg学这些就够了-组合复用（一）
eaziyytt的专栏
02-23 1871
SVG 意为可缩放矢量图形（Scalable Vector Graphics），是一种图像文件格式。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。基本的介绍就不多说了，如果不清楚的读者可以去百度一下，这里有个简单的入门教程 SVG 教程-菜鸟网络https://www.runoob.com/svg/svg-tutorial.html。 我们在做设计中，经常想到的就是复...
【编程语言】SVG 语法入门教程（绘制矩形、圆形、椭圆、多边形等）
热门推荐
知不足而奋进，望远山而前行
02-07 1万+
SVG 是使用 XML 来描述二维图形和绘图程序的语言。在 2003 年一月，SVG 1.1 被确立为 W3C 标准。参与定义 SVG 的组织有：Sun公司（已被Oracle公司收购）、Adobe、苹果公司、IBM 以及柯达。与其他图像格式相比，使用 SVG 的优势在于：与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。IE8和早期版
04、声明式绘图：利用SVG绘制层次关系图
菜鸟的博客
03-06 526
SVG 的全称是 Scalable Vector Graphics，可缩放矢量图，它是浏览器支持的一种基于 XML 语法的图像格式。SVG 可以作为 HTML 内嵌元素使用，也可以作为图像通过 img 元素加载，或者绘制到 Canvas 内。
SVG了解与绘图应用
qq_56668869的博客
07-27 820
SVG概念、使用方式、SVG创建图形、SVG绘制矩形、圆形、椭圆、文本、多边形、路径...
【我不熟悉的css 】02. 手动画一个svg图片
qq_17335549的博客
08-30 643
我不熟悉的css
svg学习
weixin_60968779的博客
11-27 1319
svg学习
绘制 SVG 图形 10
06-10
好的，以下是一个使用 SVG 绘制数字 10 的示例： ```html <svg width="100" height="100"> <rect x="10" y="10" width="80" height="80" fill="#000" /> <rect x="25" y="25" width="50" height="50" fill="#fff" /> </svg> ``` 这个例子中，我们使用了 SVG 的 rect 元素来绘制数字 10。首先，我们绘制了一个黑色的大正方形，它的左上角坐标是 (10, 10)，宽度和高度都是 80。然后，我们在这个大正方形的中心绘制了一个白色的小正方形，它的左上角坐标是 (25, 25)，宽度和高度都是 50。 这样就完成了数字 10 的绘制。您可以根据需要修改大小和颜色等属性，来绘制不同的 SVG 图形。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值