svg-study

已于 2022-04-25 18:24:37 修改
阅读量368 收藏
点赞数
分类专栏： svg 文章标签： html5
于 2022-04-24 13:36:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56735463/article/details/124375226
版权
本文介绍了SVG（可缩放矢量图形）在网页中用于绘制复杂图形的优势，对比了与Canvas的差异。SVG基于XML，可以独立存在或内嵌在HTML中。文章通过实例展示了SVG如何创建圆形、设置虚线样式、引入SVG到页面的四种方式，以及绘制矩形、线、文字和图片的方法。还探讨了SVG的<g>标签、路径绘制（Path）和图片居中等技巧，并提到了SVG的交互效果和feBlend滤镜。
摘要由CSDN通过智能技术生成

svg ：

网页中绘制复杂图形 采用“矢量图”的形式  -- 更清晰 基于html

与canvas教程不同 采用“位图”的形式 基于html5

实例：兴趣图谱  兴趣图谱

 可以很好的与js产生交互效果

 引入svg

 svg是基于xml技术也可以是一个独立的xml文件

 xmlns="http://www.w3.org/2000/svg"  是svg的命名空间 里面包括标签，自定义属性……必写

 version  = '版本号'  

绘制一个圆形 cx ：x轴坐标  cy：y轴坐标  r：圆的半径  fill ：内部填充的颜色  stroke ：边框‘

cxcy设置圆心点坐标，r设置圆的大小

<!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>
</head>

<body>
    
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        //可以通过style也可以不用style
        <!-- 一 -->
         <circle cx="100" cy="100" r="40" style="fill: pink; stroke:red ; stroke-width:2px;"></circle>         
        <!-- 二 -->
        <!-- <circle cx="100" cy="100" r="40"  fill ="lightblue"></circle>     -->
    </svg>
</body>

</html>

效果图：

stroke-dasharray属性：两个值   ；

第一个值为：虚线的长短 ， 第二个值为：每个虚线之间的距离 （数值越大越长，越大越宽）

<!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>
</head>

<body>
    
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
         <circle cx="100" cy="100" r="40" style="fill: pink; stroke:red ; stroke-width:2px; stroke-dasharray: 43 3;"></circle>         
    </svg>
</body>

</html>

 效果图：

 引入svg到页面中有四种方式

先创建一个svg页面，带有svg后缀的名称即可

 将所需要的svg写入01.svg当中

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
         <circle cx="100" cy="100" r="40" style="fill: pink; stroke:red ; stroke-width:2px; stroke-dasharray: 43 3;"></circle>         
    </svg>

 开始再html页面当中引入 ---- 四种方式

<!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>
</head>

<body>
    <!--直接写到html页面也是ok的 -->
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="100" cy="100" r="40" style="fill: yellow; stroke:red ; stroke-width:2px; stroke-dasharray: 43 3;"></circle>         
   </svg>
    <!-- 通过图片的方式引入svg -->
    <img src="./01.svg" />
    <!-- 通过背景的方式引入svg -->
    <div style="width: 200px; height: 200px; background: url(./01.svg) no-repeat;"></div>
    <!-- 通过框架的方式引入svg -->
    <iframe src="./01.svg"></iframe>
</body>

</html>

 将svg背景设置成透明 -- fill = “transparent/none" 

<!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>
        #box {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div id="box">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="100" cy="100" r="40" style="fill:transparent; stroke:red ; stroke-width:2px; stroke-dasharray: 43 3;"></circle>         
   </svg>
    </div>
</body>

</html>

矩形：

<!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>
        #box {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div id="box">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <!-- x表示距离顶部多少距离 相当于margin-top   y 相当于margin-left -->
<!-- 用rx，ry设置rect对角的弧度  rx:边边角椭圆的x值 ry:边边角椭圆的y值  如果只只设置了rx ,那么默认ry的值和rx的值相等 ry同理-->
        <rect width="100" height="100" x="10" y="10" fill="pink" stroke="red" ry="38" rx="21"></rect>
   </svg>
    </div>
</body>

</html>

线：

<!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>
        #box {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div id="box">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <!-- line没有fill属性只有stroke属性  -->
            <!-- stroke-opcity设置line的透明度，默认是1 完全透明用0 没有transparent的值  -->
        <line x1="23" y1="54" x2="100" y2="123" stroke="lightblue" stroke-width="5" stroke-opacity="0.5"></line>
   </svg>
    </div>
</body>

</html>

 <g>标签

他是一个容器(分组标签)，是用来 组合元素的,将里的元素看着一个整体 虽然没有什么实际效果，但是可以将元素进行统一效果 同样可以设置id，class……

<g>标签中元素的位移用tramsform = "translate(x,y)"

<!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>
        #box {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div id="box">
        <svg  xmlns="http://www.w3.org/2000/svg"  version="1.1">
            <!-- <circle cx="30" cy="30" r="30" stroke="black" fill="none"></circle>
        <circle cx="30" cy="30" r="25" stroke="black" fill="none"></circle>
        <circle cx="30" cy="30" r="20" stroke="black" fill="none"></circle>
        <circle cx="30" cy="30" r="15" stroke="black" fill="none"></circle>
        <circle cx="30" cy="30" r="10" stroke="black" fill="none"></circle>
        <circle cx="30" cy="30" r="5" stroke="black" fill="none"></circle> -->
        <!-- 如果将每个圆形一起放在整个盒子的中间,那么需要设置每个圆的cycx值,
        如果用g将所有圆包含,那么只需要设置g的位置，就可以将所有的圆居中 -->
        <g  transform="translate(100,100)" stroke="black"  >
        <circle r="30" fill="none"></circle>
        <circle r="25" fill="none"></circle>
        <circle r="20" fill="none"></circle>
        <circle r="15" fill="none"></circle>
        <circle r="10" fill="none"></circle>
        <circle r="5"  fill="none"></circle>
    </g>
        </svg>


    </div>
</body>

</html>

文字标签<text>

 x ,y 再x轴y轴上的坐标

text-anchor：middle/start/end (文字的左右起始位置对齐效果 其中start = right ，end = left ， middle= center)

上下对齐公式 ：y =  文字字体大小 / 2  -  2 就可以实现上下对齐了

如果没有设置文字字体大小 那么 y = y + 5

<!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>
        #box {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div id="box">
        <svg  xmlns="http://www.w3.org/2000/svg"  version="1.1">        
        <circle cx="100" cy="100"  r="30" fill="none" stroke="black"></circle>
        <text x="100" y="108" text-anchor="middle" font-size="20" >hello</text>
        <!-- <text x="100" y="105" text-anchor="middle" >hello</text> -->
        </svg>


    </div>
</body>

</html>

设置共同属性 -- 手指形状的移入效果

<!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>
        #box {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div id="box">
        <svg  xmlns="http://www.w3.org/2000/svg"  version="1.1">
        <g style="cursor: pointer;">
            <circle cx="100" cy="100"  r="30" fill="none" stroke="black" ></circle>
        <text x="100" y="108" text-anchor="middle" font-size="20" >hello</text>
        <!-- <text x="100" y="105" text-anchor="middle" >hello</text> -->
        </g>
        </svg>


    </div>
</body>

</html>

 再svg当中添加图片<image>标签

 x,y:

width,height:图片的宽高

xlink:herf = "图片链接”

图片居中的公式：x = x -(width/2)        y = y- (height /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>
        #box {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <div id="box">
        <svg  xmlns="http://www.w3.org/2000/svg"  version="1.1" height="1000" width="1000">
        
        <g style="cursor: pointer;">
            <!-- 居中前 -->
            <!-- <image x="100" y="100" width="100" height="100" xlink:href="./imgs/111.png"></image> -->
            <!-- 居中后 -->
            <image x="0" y="0" width="200" height="200" xlink:href="./imgs/111.png"></image>
        <text x="100" y="108" text-anchor="middle" font-size="20" >hello</text>
        <!-- <text x="100" y="105" text-anchor="middle" >hello</text> -->
        </g>
        </svg>


    </div>
</body>

</html>

效果：

折线绘制

point中空格可以用逗号代替

points = ‘ 第一个点坐标  第二个点坐标  第三个的坐标……’ --- 默认有填充黑色

<!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>
        #box {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
    <script>
        window.onload = function(){
            var svgNS = 'http://www.w3.org/2000/svg';
            var oParent = document.getElementById('div1');
        }
    </script>
</head>

<body>
    <div id="div1">
        <svg  xmlns="http://www.w3.org/2000/svg"  version="1.1" height="1000" width="1000">
     <!-- 折线绘制x1 y1 x2/x1 y2/y1 x2 y2  70 70是前两个值的终端坐标，是后两个值的起点坐标 -->
     <!-- 多边形 闭合 -->
     <polygon points="20 20 70 70 30 100 80 110 " stroke="black" fill="none"></polygon>
     <!-- 折线 不闭合 -->
     <polyline points="20 20 70 70 30 100 80 110 " stroke="black" fill="none"></polyline>
        </svg>


    </div>
</body>

</html>

Path 

通过d属性绘制图画 十个相关命令

    第一个坐标 (50，100)  第二个点坐标（200,200）第三个点做坐标(100,100)

M表示起始点

Z首位闭合

d = 'M50 100L200 200L100 100' 这个是没有闭合的图像

d = 'M50 100L200 200L100 100Z'

<!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>
        #box {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
    <script>
        window.onload = function() {
            var svgNS = 'http://www.w3.org/2000/svg';
            var oParent = document.getElementById('div1');
        }
    </script>
</head>

<body>
    <div id="div1">
        <svg  xmlns="http://www.w3.org/2000/svg"  version="1.1" height="1000" width="1000">

            <!-- <path d="M100 100L70 150L80 80" stroke="black" fill="none"></path> -->
            <path d="M100 100L70 150L80 80z" stroke="black" fill="none"></path>
        </svg>


    </div>
</body>

</html>

H代表水平绘制，V代表垂直绘制 

<!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>
        #box {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
    <script>
        window.onload = function() {
            var svgNS = 'http://www.w3.org/2000/svg';
            var oParent = document.getElementById('div1');
        }
    </script>
</head>

<body>
    <div id="div1">
        <svg  xmlns="http://www.w3.org/2000/svg"  version="1.1" height="1000" width="1000">
            <!-- 可以负数 -->
            <path d="M70 20v100H-100" stroke="black" fill="none"></path>
        </svg>


    </div>
</body>

</html>

一共十个值：

大写(绝对坐标)：相对距离

小写(相对坐标)：相对长度

<!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>
        #box {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
    <script>
        window.onload = function() {
            var svgNS = 'http://www.w3.org/2000/svg';
            var oParent = document.getElementById('div1');
        }
    </script>
</head>

<body>
    <div id="div1">
        <svg  xmlns="http://www.w3.org/2000/svg"  version="1.1" height="1000" width="1000">
            <!-- 绘制正圆 -->
            <!-- <path d="M100 100A100 100 0 1 1 200 200" stroke="red" stroke-width="3" fill="none"></path> -->
            <!-- 绘制扇形 -->
            <path d="M150 150A100 100 0 0 1 250 150L225 175A50 50 0 0 0 175 175Z" stroke="red" stroke-width="3" fill="none"></path>
        </svg>


    </div>
</body>

</html>

svg之path详解 - 简书

feBlend - SVG | MDN

m0_56735463
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html常用标签（二）
weixin_45531755的博客
07-26 1454
html常用标签
【SVG】svg入门
qq_45801837的博客
11-22 2930
svg图和其他png图的区别： svg图片上的每一个小的组成元素都是一个标签，由一个大的svg标签包裹作为一个整体 普通的png图片，就是作为一个整体，只能修改宽高大小等样式，不能修改细节 一、标签属性 1、SVG：可缩放矢量图（Scalable Vector Graphics） 2、可直接插入网页，成为DOM元素，通过js和css描绘图形，也可以使用src和url导入 3、svg标签属性 1、width、height：如果不指定这两个属性，默认是宽：300px，高：150px 2、viewBox(左上
Vue项目中动态给svg 中 xlink:href 属性赋值
HWJBJ的博客
04-23 1万+
Vue项目中动态给svg 中 xlink:href 属性赋值 在vue项目中有这样需求： 需要将svg中xlink:href 属性 通过传值的方式，修改图标名字 绑定属性的时候我们总是习惯使用 (:属性)的方式，但是对与 “xlink:href” 这样结构的属性，（:xlink:href）是没用的， 所以使用（v-bind:xlink:href）就可以啦 <template slot="name" slot-scope="text, record"> <svg class="icon
svg入门 第一节
qq_40816649的博客
01-31 2090
什么是SVG？ SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 viewport和viewBox 学好svg需要先了解svg中的viewport和viewBox这两个概念。 viewpart是整个svg的可见区域即svg标签.
<circle> 标签可用来创建一个圆。
草帽
03-14 1011
标签可用来创建一个圆。 标签 标签可用来创建一个圆。 请把下面的代码拷贝到记事本，然后把文件保存为 "circle1.svg"。把此文件放入您的web目录： 代码解释： cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0) r 属性定义圆的半径。 查看例子 ...
Web-study
03-21
通过分析和修改【Web-study-master】中的代码，你可以亲手构建网页，从而巩固所学。记住，不断练习和构建实际项目是提升技能的关键。 总的来说，【Web-study】是一个全面学习HTML和Web开发的基础平台，无论你是新手...
first-web-study
03-28
在【压缩包子文件的文件名称列表】"first-web-study-master"中，"master"分支通常代表GitHub上的主分支，这可能意味着这个项目是一个开源项目，或者至少是从某个版本控制系统（如Git）中导出的。文件名没有给出具体...
program-language-study
03-07
在“program-language-study-main”这个文件夹中，可能包含了关于这些技术的教程、示例代码、练习项目或者相关的学习资料。学习这些技术，你可以逐步掌握创建交互式、动态网页的能力，并为成为前端开发者奠定坚实...
CSS-STUDY
03-25
在IT行业中，CSS（Cascading Style Sheets）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。CSS的学习是前端开发的基础，它允许我们控制网页的布局，包括字体、颜色、大小、位置、...
re-study
03-18
在IT行业中，不断学习和深化技能是至关重要的。"re-study"这个项目似乎是一个针对Web开发者..."re-study-master"可能是一个包含示例代码、教程或者项目的压缩包，通过研究这些内容，你可以更深入地理解和掌握这些技术。
SVG的属性使用和示例
ouyangyiming的博客
08-19 445
SVG效果图
#绘制圆心_SVG 绘制圆形
weixin_34975747的博客
01-13 297
本节我们来学习如何在 SVG 中绘制圆形，圆形也是 SVG 的基本形状之一，我们可以通过 <circle> 元素来绘制原型。如何绘制一个圆形要绘制圆形可以通过 <circle> 元素来实现，在绘制圆形时，我们需要确定这个圆的圆心及半径。其中确定圆心需要用到 cx 属性和 cy 属性，半径需要用到 r 属性。除此之外，还可以使用 fill 属性圆进行颜色填充，stroke 属...
绘制可伸缩矢量图形（SVG）
KWLShadow的博客
09-22 1699
1、SVG概述 可伸缩矢量图形（Scalable Vector Graphics，SVG）使用XML格式在Web上定义基于矢量的图形。矢量图形是根据几何特性来绘制的图形，矢量（Vector）可以是一个点或一条线。矢量图以几何图形居多，图形可以无限放大，不变色、不模糊，常用于图案、标志、文字等方面的设计。 1）SVG的特性 与JPEG和GIF等格式的图像相比，SVG图像更主要具有如下优势。 ...
svg的stroke属性，神奇的描边
baifu2766的博客
02-10 1647
1、stroke 定义一条线，文本或元素轮廓颜色 2、stroke-width 定义一条线，文本或元素轮廓厚度 3、stroke-linecap 描边端点表现形式 <svg> <g fill='none' stroke='black' stroke-width='10'> <path stroke-linecap...
SVG 中的基础图形(rect , line ,circle 等)以及在 D3.js 中的应用
法研鲁迅的个人博客
03-15 4494
SVG 中的基础图形(rect , line ,circle 等)以及在 D3.js 中的应用 文章目录SVG 中的基础图形(rect , line ,circle 等)以及在 D3.js 中的应用矩形 - rect直线 - line圆形 - circle椭圆 - ellipse 在 D3.js 中,根据要展示的数据,我们挑选合适的 svg 中的基础图形,然后进行一系列的设置等,使其达到我们的要求...
SVG入门-填充和边框
natsu-cc的博客
03-22 2288
前言 当我们绘制好了形状之后，是不会在SVG上显示出来（当然浏览器会给形状定义默认的填充色）。需要学习如何给形状添加颜色。可以使用几种方法来着色，包括指定对象的属性，使用内联CSS样式，或者内嵌的CSS样式，或者使用外部的CSS样式文件。大多数的web网站的SVG使用的是内联样式CSS，对于这些方法都有优缺点。 Fill 和 Stroke 属性 要使得形状显示出来，可以用两个属性来解决，一个是fill属性，一个是stroke属性，fill是填充，stroke是描边。 <rect x="10" y="
SVG 形状元素（rect、circle、ellipse、line、polyline、polygon、path）
热门推荐
司马懿的西山居
11-25 1万+
SVG有一些预定义的形状元素 矩形 <rect> 圆形 <circle> 椭圆 <ellipse> 线 <line> 折线 <polyline> 多边形 <polygon> 路径 <path> 矩形 <rect> <rect> 用于创建 矩形 和 圆角矩形 （x，y）是矩形左上角坐标，默认是（0，0） （width，height）是矩形的宽度和高度 （rx，ry）是矩形圆角的水平半径和垂直半径 <s
SVG 圆形 - ＜circle＞
m0_67633378的博客
04-20 382
<svg xmlns="http://xxxxxxxxxxxx/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>
svg详解
顺其自然~专栏
03-30 3154
定义 SVG 意为可缩放矢量图形（Scalable Vector Graphics）。SVG 使用 XML 格式定义图像。 实例： <html> <body> <h1>My first SVG</h1> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> &lt...
S60平台SVG-T图形指南
SVG-T（Scalable Vector Graphics - Tiny）是一种针对移动设备优化的图形格式，由NOKIA DORUM发布，主要适用于S60平台版本1.0。这个指南旨在提供关于SVG-T的基本信息，帮助开发者理解和利用这种图形格式在手机应用中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值