一文搞懂SVG的`viewBox`属性

于 2024-09-08 21:10:04 发布
阅读量4.7k 收藏 49
点赞数 49
分类专栏： SVG D3 文章标签： 前端 数据可视化 javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43806699/article/details/142032873
版权

一文搞懂SVG的viewBox属性

MDN介绍viewBox属性

viewBox 属性允许指定一个给定的一组图形伸展以适应特定的容器元素。

viewBox 属性的值是一个包含 4 个参数的列表 min-x, min-y, width and height，以空格或者逗号分隔开，在用户空间中指定一个矩形区域映射到给定的元素，查看属性preserveAspectRatio。

不允许宽度和高度为负值，0 则禁用元素的呈现。

  • min-x：定义了viewBox的最小x坐标。
  • min-y：定义了viewBox的最小y坐标。
  • width：定义了viewBox的宽度。
  • height：定义了viewBox的高度。

viewBox的作用

  1. 缩放：viewBox允许SVG图形在不同的尺寸下进行缩放。无论SVG容器的尺寸如何变化，内部的图形都会根据viewBox定义的比例进行缩放。
  2. 定位：通过设置min-x和min-y，你可以控制SVG图形在容器中的位置。例如，你可以将图形移动到容器的中心、左上角或其他任何位置。
  3. 裁剪：viewBox还可以用于裁剪SVG内容，只显示定义区域内的部分。

情况一：已设置svg固定尺寸

画图理解原理

MDN给出的解释，如果不加以实践，是不能直观的理解viewBox概念的，实践才是理解概念的唯一标准。

首先，绘制一个正常的矩形1：300*300，绿色背景，红色边框的矩形,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
		svg {
			display: inline-block;
            border: 1px solid red;
			}
	</style>
</head>
<body style="padding: 200px;">
    <svg width="300" height="300"  >
        <rect x="0" y="0" width="300" height="300" fill="#47cc47" />
    </svg>
</body>
</html>

运行结果为
在这里插入图片描述
然后，绘制矩形2，给svg增加viewBox属性，设置viewBox="0 0 300 300"

<body style="padding: 200px;">
    <svg width="300" height="300" >
        <rect x="0" y="0" width="300" height="300" fill="#47cc47" />
    </svg>
    <svg width="300" height="300" viewBox="0 0 300 300" >
        <rect x="0" y="0" width="300" height="300" fill="#47cc47" />
    </svg>
</body>

在这里插入图片描述

如果将viewBox属性的四个值设置为0,0,svgWidth,svgHeight最终视图显示与矩形1一样，无法理解viewBox工作原理
接着，绘制矩形3，修改viewBox="0,0,100,100"

<body style="padding: 200px;">
    <svg width="300" height="300" >
        <rect x="0" y="0" width="300" height="300" fill="#47cc47" />
    </svg>
    <svg width="300" height="300" viewBox="0 0 300 300" >
       <rect x="0" y="0" width="300" height="300" fill="#47cc47" />
    </svg>
    <svg width="300" height="300" viewBox="0 0 100 100" >
        <rect x="0" y="0" width="300" height="300" fill="#47cc47" />
    </svg>
</body>

在这里插入图片描述

三个矩形无任何差别，肉眼无法分辨出差异。此时打开开发者工具，观察矩形3的尺寸大小。可以很明显的看的矩形3的实际尺寸已经到900，svg中仅仅显示的是矩形的1/9。这里可以猜测

矩形实际宽度 = svg宽度 / viewBox宽度 * 矩形理论宽度
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/c35b708476914cae9c5a871488c1df6a.png#pic_center) 最后，绘制矩形4，令`viewBox=0,0,600,600`，如果上述猜想正确，这一次的矩形的宽高 =` 300/600*300=150`，最终应该显示`150*150`的矩形。 
<body style="padding: 200px;">
    <svg width="300" height="300" >
        <rect x="0" y="0" width="300" height="300" fill="#47cc47" />
    </svg>
    <svg width="300" height="300" viewBox="0 0 300 300" >
        <rect x="0" y="0" width="300" height="300" fill="#47cc47" />
    </svg>
    <svg width="300" height="300" viewBox="0 0 100 100" >
        <rect x="0" y="0" width="300" height="300" fill="#47cc47" />
    </svg>
    <svg width="300" height="300" viewBox="0 0 600 600" >
        <rect x="0" y="0" width="300" height="300" fill="#47cc47" />
    </svg>
</body>

在这里插入图片描述

猜想正确，viewBox的宽高与SVG内部元素之间的宽高之间的关系弄明白了，尝试着修改一下viewBox的起始坐标。
接着，绘制矩形5，viewBox="150,150,300,300"，依然保持宽高为150不变。

<body style="padding: 200px;">
    <svg width="300" height="300" >
        <rect x="0" y="0" width="300" height="300" fill="#47cc47" />
    </svg>
    <svg width="300" height="300" viewBox="0 0 300 300" >
        <rect x="0" y="0" width="300" height="300" fill="#47cc47" />
    </svg>
    <svg width="300" height="300" viewBox="0 0 100 100" >
        <rect x="0" y="0" width="300" height="300" fill="#47cc47" />
    </svg>
    <svg width="300" height="300" viewBox="0 0 600 600" >
        <rect x="0" y="0" width="300" height="300" fill="#47cc47" />
    </svg>
    <svg width="300" height="300" viewBox="150 150 300 300" >
        <rect x="0" y="0" width="300" height="300" fill="#47cc47" />
    </svg>
</body>

在这里插入图片描述
根据上图，可见矩形4和矩形5居然一样，但是矩形5的rect节点宽高是300*300，而矩形4的是150*150。

情况二：未设置svg固定尺寸

如果没有对svg设置固定尺寸，并且使用了viewBox属性。这种用法多用于响应式图表。

两坐标均等于0

这里讨论两坐标均等于0（min-x=0,min-y=0）情况，即视图框（viewBox）的起始点在坐标原点(0,0)。

在矩形1中，添加一个圆，半径=4。这里矩形完全填充svg。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html,
			body {
				height: 100%;
			}
			svg {
				height: 50%;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<svg viewBox="0 0 100 100">
			<rect x="0" y="0" width="100%" height="100%" fill="#47cc47" />
			<circle cx="50%" cy="50%" r="4" fill="#3c4acc" />
		</svg>
	</body>
</html>

在这里插入图片描述
当使用相对单位时，如百分比、视觉尺寸，无论是否使用viewBox，正方形的外观都不会改变。 使用大viewBox时，圆圈看起来很小。因为它使用用户单位作为r属性：4远小于viewBox中设置的100。

为了进行对比，画矩形2。令viewBox="0 0 10 10"，r=4不变。

<body>
    <svg viewBox="0 0 100 100">
        <rect x="0" y="0" width="100%" height="100%" fill="#47cc47" />
        <circle cx="50%" cy="50%" r="4" fill="#3c4acc" />
    </svg>
     <svg viewBox="0 0 10 10">
        <rect x="0" y="0" width="100%" height="100%" fill="#47cc47" />
        <circle cx="50%" cy="50%" r="4" fill="#3c4acc" />
    </svg>
</body>

在这里插入图片描述
使用小viewBox时，圆圈看起来很大。因为它使用用户单位作为r属性：4仅小于viewBox中设置的10。所以矩形2中的圆相对于viewBox尺寸更大。

两坐标有中至少一个小于0

讨论一种特殊情况，当viewBox起始位置为负数时，请看矩形3。

<body>
    <svg viewBox="0 0 100 100">
        <rect x="0" y="0" width="100%" height="100%" fill="#47cc47" />
        <circle cx="50%" cy="50%" r="4" fill="#3c4acc" />
    </svg>
     <svg viewBox="0 0 10 10">
        <rect x="0" y="0" width="100%" height="100%" fill="#47cc47" />
        <circle cx="50%" cy="50%" r="4" fill="#3c4acc" />
    </svg>
    <svg viewBox="-5 -5 10 10">
        <rect x="0" y="0" width="100%" height="100%" fill="#47cc47" />
        <circle cx="50%" cy="50%" r="4" fill="#3c4acc" />
    </svg>
</body>

在这里插入图片描述
可以看到，矩形3已经移到视图的右下角，这是怎么回事呢？

这是因为viewBox属性则定义了SVG内部的坐标系统。视图框（viewBox）的起始点始终为svg的左上角。这个起始点的位置，要相对于屏幕左上角而言。理论见下图。
在这里插入图片描述
由于viewBox="-5 -5 10 10"，x=-5，则视图框的起始点向右移动5的单位；y=-5，视图框的起始点向下移动5个单位。此时视图框的起始点正好位于视口的中心。并且100%仍然解析为10个用户单位的宽度或高度，因此矩形看起来已移动到视口的底部/右角。坐标点0,0位于视口中心时，圆心中点值50%解析为5，这意味着圆心为在视口的底部/右角。为什么显示的是1/4个圆角？因为整个视图大小依然是从0 0 10 10范围不变，原来svg偏移后得到新的svg；两者之间的交集部分就形成了1/4圆角。这就是viewBox裁剪SVG的原理，只显示定义区域内的部分。

有了上面原理，就可以实现任意裁剪的视图，只显示定义区域内的部分。例如显示上半圆部分：

<svg viewBox="0 -5 10 10">
    <rect x="0" y="0" width="100%" height="100%" fill="#47cc47" />
    <circle cx="50%" cy="50%" r="4" fill="#3c4acc" />
</svg>

原理图如下：
在这里插入图片描述
显示左半圆（读者自己画理论图）：

<svg viewBox="-5 0 10 10">
    <rect x="0" y="0" width="100%" height="100%" fill="#47cc47" />
    <circle cx="50%" cy="50%" r="4" fill="#3c4acc" />
</svg>

在这里插入图片描述
显示右下角1/4圆（读者自己画理论图）：

<svg viewBox="5 5 10 10">
    <rect x="0" y="0" width="100%" height="100%" fill="#47cc47" />
    <circle cx="50%" cy="50%" r="4" fill="#3c4acc" />
</svg>

在这里插入图片描述

配合preserveAspectRatio属性使用

有时候，通常我们使用 viewBox 属性时，希望图形拉伸占据整个视口。在其他情况下，为了保持图形的长宽比，必须使用统一的缩放比例。

preserveAspectRatio 属性表示是否强制进行统一缩放。

对于非标签，preserveAspectRatio 只适用于在同一元素上为 viewBox 提供的值。对于这些元素，如果没有提供属性 viewBox，则忽略了 preserveAspectRatio。也就是说，只有设置了viewBox属性，preserveAspectRatio才会起作用。

使用：

<svg viewBox="5 5 10 10" preserveAspectRatio="<align> [<meetOrSlice>]" />

align

<align> 属性值表示是否强制统一缩放，当 SVG 的 viewbox 属性与视图属性宽高比不一致时使用。<align> 属性的值一定是下列的值之一：

  • none 不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。（注意：如果 <align> 的值是 none ，则 <meetOrSlice> 属性的值将会被忽略。）
  • xMinYMin - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐。
  • xMidYMin - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐。
  • xMaxYMin - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值与视图的 Y 的最小值对齐。
  • xMinYMid - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。将 SVG 元素的 viewbox 属性的 Y 的中点值与视图的 Y 的中点值对齐。
  • xMidYMid (默认值) - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。将 SVG 元素的 viewbox 属性的 Y 的中点值与视图的 Y 的中点值对齐。
  • xMaxYMid - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。将 SVG 元素的 viewbox 属性的 Y 的中点值与视图的 Y 的中点值对齐。
  • xMinYMax - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值与视图的 X 的最小值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。
  • xMidYMax - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的中点值与视图的 X 的中点值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。
  • xMaxYMax - 强制统一缩放。将 SVG 元素的 viewbox 属性的 X 的最小值 + 元素的宽度与视图的 X 的最大值对齐。将 SVG 元素的 viewbox 属性的 Y 的最小值 + 元素的高度与视图的 Y 的最大值对齐。

meetOrSlice

<meetOrSlice> 是可选的，如果提供的话，与 <align> 间隔一个或多个的空格，参数所选值必须是以下值之一：

  • meet(默认值) - 图形将缩放到：

    • 宽高比将会被保留
    • 整个 SVG 的 viewbox 在视图范围内是可见的
    • 尽可能的放大 SVG 的 viewbox，同时仍然满足其他的条件。

    在这种情况下，如果图形的宽高比和视图窗口不匹配，则某些视图将会超出 viewbox 范围（即 SVG 的 viewbox 视图将会比可视窗口小）。

  • slice-图形将缩放到：

    • 宽高比将会被保留
    • 整个视图窗口将覆盖 viewbox
    • SVG 的 viewbox 属性将会被尽可能的缩小，但是仍然符合其他标准。

    在这种情况下，如果 SVG 的 viewbox 宽高比与可视区域不匹配，则 viewbox 的某些区域将会延伸到视图窗口外部（即 SVG 的 viewbox 将会比可视窗口大）。

彩蛋

你以为读完了这篇博客你就弄懂了viewBox吗？不妨一起思考如下问题：
我们的上述例子中viewBox的宽度和高度都是成比例缩放的，假如

SVG的宽度 / viewBox的宽度 != SVG的高度 / viewBox的高度

SVG会如何缩放画布大小？

如果读取有兴趣可以自行尝试，或者催更我。

iewbox `属性将会被尽可能的缩小，但是仍然符合其他标准。

在这种情况下，如果 SVG 的 `viewbox `宽高比与可视区域不匹配，则 `viewbox `的某些区域将会延伸到视图窗口外部（即 `SVG `的 `viewbox `将会比可视窗口大）。

彩蛋

你以为读完了这篇博客你就弄懂了viewBox吗？不妨一起思考如下问题：
我们的上述例子中viewBox的宽度和高度都是成比例缩放的，假如

SVG的宽度 / viewBox的宽度 != SVG的高度 / viewBox的高度

SVG会如何缩放画布大小？

如果读取有兴趣可以自行尝试，或者催更我。

SVG View Box 深度解析
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
07-31 1207
希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，可以用来创建高质量的可缩放图形。因此，原本200x200的内容会被缩小以适应100x100的容器。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，同样设为100x100。的左上角坐标设置为负数，我们可以将SVG内容向画布中心移动。这里我们定义了一个100x100的SVG画布，
SVG 基本语法
最新发布
wjs2024的博客
03-22 511
本文介绍了SVG的基本语法，包括SVG的结构、图形元素和属性。通过学习本文，您应该能够快速掌握SVG的使用，为您的网页设计添加丰富的图形元素。
前端基础入门三大核心之HTML篇 —— SVG的viewBox、width和height：绘制矢量图的魔法比例尺【含代码示例】
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-24 1675
SVG的viewBox、width和height，这三位魔法师联手，为我们的网页施加了适应性强、清晰度高的视觉魔法。掌握了它们的秘诀，无论是响应式设计还是高清大屏展示，都将游刃有余。在你的项目中，是否遇到过SVG缩放的有趣挑战？或是有独到的使用技巧？欢迎在评论区分享你的故事，让我们一起探索SVG的无限可能，让魔法更加绚烂多彩！欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
深入解析SVG 标签的 viewBox属性（超详细）
懒羊羊大王的博客
08-15 4120
相信小伙伴们在学习svg标签的viewBox属性时候，无论是看w3cschool还是MDN的官方文档，都是一头雾水。我当时也是尝尽了苦头，绕了很大的弯子才弄懂其中的奥秘。下面我将我的探究成果分享给大家。
12. SVG 的viewBox属性详解
一名全栈开发工程师
05-14 2034
当SVG元素的视窗（viewport）和viewBox的宽高比不匹配时，SVG内容应如何缩放和对齐。属性可以接受多种不同的值，每个值都会影响SVG内容的缩放和对齐方式。这个属性的值由两部分组成：对齐方式和缩放行为。第一个参数是必须的第二个是可选的。
一图说明svg的viewBox属性
weixin_42715889的博客
12-26 911
【代码】一图说明svg的viewBox属性。
理解SVG的viewport,viewBox,preserveAspectRatio
weixin_33701564的博客
06-30 379
viewport 表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。 <svg width="500" height="300"></svg> 上面的SVG代码定义了一个视区，宽500单位，高300单位。 注意这里的措辞是“单位”，不是“像素”。虽然说，width/height如果是纯数字，使用的就是“像素”作为单位的。 也就是说，上面SVG的视...
一文带你掌握SVG坐标系统
Cai
12-10 2358
SVG坐标系统 viewport viewport指的是SVG图像的可视区域，一个SVG图像的viewport可以无限大，但是可视区域只能是屏幕的分辨率，我们通过svg元素中的width和height属性指定viewport的尺寸。 <svg width="500" height="300"></svg> 这个例子定义了一个宽500、高300的viewport。 同时，你也可以为svg的viewport指定单位： em：默认的字体大小，通常一个字符的高度 ex：字符x的高
python处理svg 平移 旋转_理解SVG transform坐标变换(转)
weixin_40004051的博客
12-09 986
一、HTML transform和SVG transformSVG中自带transform属性，没错，是属性，例如：普通的HTML元素没有transform属性，但是支持CSS3的transform, 好奇的小伙伴可能会疑问了，CSS3中的transform变换，跟SVG中的transform是什么关系呢？恩，有点类似于谢霆锋和陈冠希之间的关系，有些小复杂。OK, 先说说相似之处吧。一些基本的变换...
SVG之旅：描边特性
W3cplus
01-13 1053
在上一节介绍SVG填充特性中，提到了SVG中另一个特性描边特性（stroke）。SVG的描边特性主要包括stroke、stroke-width、stroke-opacity、stroke-dasharray、stroke-linecap、stroke-linejoin和stroke-miterlimit等属性。在这一节中，主要围绕这几个SVG属性进行展开。在SVG中咱们通过stroke来对绘制的图
SVG之旅：线条之美，玩转SVG线条动画
W3cplus
01-18 3221
在上一节的《SVG线条动画实现原理》一文中，了解了SVG中线动画是怎么做的。在这篇文章中，了解了怎么借助Sketch这样的制作软件绘制SVG的路径，然后借助于SVG的stroke-dasharray和stroke-dashoffset值设置为路径的长度（最好是大于其长度，可以通过.getTotalLength()获取到路径的长度），在@keframes中的100%处设置stroke-dashoff
svg 学习记录之 viewBox 属性
阿臻
08-22 2489
首先可以想象 svg 标签是一个屏幕, viewBox 是一个截屏窗口大小, 而 rect 是截取窗口里面的内容, 当你截屏完成后, 你要把这个截取的图片放在一个名为 svg 的屏幕上, 这时候如果 viewBox 小于舞台大小, 那就要放大截图来铺满 svg, 如果 viewBox 大于 svg 的尺寸那就要缩小截图来达到铺满 svg 舞台。有 viewBox 的效果 , 现在的 viewBox 是远小区 svg 的宽高。有 viewBox 的效果 , 现在的 viewBox 是远大于 svg的宽高。
svg viewbox
sclxf的专栏
09-15 4957
SVG:viewBox是SVG的虚坐标系,比VML的简单不少。为根节点svg元素加上viewBox属性后,在svg下的各图形元素的大小和位置都是按viewBox限定的坐标,而不是页面的实际坐标。如: 在100x100的svg区域中,放入一个200x200的方块,按理不能正常显示,会被裁去一部分。但是因为加入了viewBox属性,svg区域会完整显示rec
关于SVG的viewBox
doop1120的专栏
04-14 1万+
svg viewBox
svg中viewbox图解分析
月来better
05-25 1582
svg中有一个viewbox属性，中文翻译为视区，就是在svg上截取一小块，放大到整个svg显示。 这个属性初学的话有点难以理解，这边做一个简单的示例，一看就明白了。 1）先来一个svg，宽高各位300，设置一下边框： <svg width="300" height="300" style="border: 1px solid steelblue"> </svg> 运行效果： 这边其实就是一个300*300的矩形。 2）svg里面画一个矩形： <svg width="30.
svg中viewBox理解
m0_38081413的博客
03-28 2046
一般的svg中都会设置viewBox属性，有时候总是觉得这个值的设置和理解的不一样，近日，看svg精髓，总算是理解了，现在，将理解的要点记录如下： 比如以下一段svg代码 <svg width="30" height="80" viewBox="0 0 50 50"> <circle cx="25" cy="25" r="25" style="stroke:black;fill:none"/> </svg> 上面代码设置svg画布的宽高分别为30和80，而viewBo
SVG的viewBox
Meskjei的博客
06-24 3378
SVG中有个viewBox的概念。而要解释这个概念，则需看一个例子。 <svg height="800" width="600" viewBox="0 0 60 80" style="border:1px solid #ff0000"> <rect height="40" width="30" fill="#abcdef"/> </svg> 首先是s...
svg的viewBox、width和height的设置说明
大剑师兰特的GIS世界
05-26 3798
其中x，y就是用于定义svg画布在世界坐标下的位置，通过修改x，y可以移动画布在世界坐标下的位置。svg的是没有边界的，svg画布只是用于展示svg世界中某一个范围的内容，而对于超过了svg画布范围的内容，则会被遮挡。当wheight的时候，相当于拉远了视野，视野变大了，但实际显示的区域没有发生变化；这就会导致显示的图形变小，显示的区域变大。
svg之ViewBox详解,秒懂SVG里的viewbox
热门推荐
zp19860529的博客
02-27 3万+
今天学 SVG 的时候看到了 viewbox 属性，先来看一下svg的格式： <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" id="layer1" xmlns="http://www.w3.org/2000/svg" .
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值