SVG 可视化案例库

围绕路径、方向、结构、状态与图形渲染,展示浏览器端可交互的可视化案例。

结构与受力

力可以改变物体的形状和运动状态
结构与受力 · 力学

力可以改变物体的形状和运动状态

通过 SVG 弹簧、滑块与小球轨迹,展示力的大小影响形变程度及运动快慢与方向变化,适合在浏览器端观察参数改变带来的形状与运动状态对比。

杠杆平衡条件
结构与受力 · 力学

杠杆平衡条件

通过 SVG 杠杆支点、动力臂与阻力臂与钩码,展示动力与动力臂的乘积和阻力与阻力臂的乘积之间的相等或不等关系决定了杠杆的倾斜状态,适合在浏览器端观察力矩变化与平衡恢复过程。

石墨烯与碳纳米管微观结构演变
结构与受力 · 结构

石墨烯与碳纳米管微观结构演变

通过 SVG 碳原子六边形网络、离域大π键电子云与碳纳米管管壁,展示石墨烯二维平面到碳纳米管一维管状的空间卷曲过程及其手性差异,适合在浏览器端观察六元环连接方式与电子云分布变化。

s与p电子云空间伸展方向与节面
结构与受力 · 结构

s与p电子云空间伸展方向与节面

通过 SVG 电子云散点、等密度面轮廓与角度节面,展示s轨道与p轨道的空间伸展方向差异及节面位置,适合在浏览器端观察轨道形状与节面的空间关系。

叶片横切结构示意图
结构与受力 · 器官

叶片横切结构示意图

通过 SVG 表皮层、叶肉组织与叶脉结构,展示叶片横切各层细胞排列与叶绿体分布的适应性关系,适合在浏览器端观察结构与功能对应的可视化细节。

简谐横波传播状态模型
结构与受力 · 力学

简谐横波传播状态模型

通过 SVG 波形曲线、质点与方向箭头,展示波传播方向与质点振动方向的关系,适合在浏览器端观察波动参数变化与质点运动过程。

电路与电磁

滑动变阻器原理
电路与电磁 · 电学

滑动变阻器原理

通过 SVG 变阻器滑片、电阻线圈与电流表,展示变阻器滑片位置变化影响电路总电阻、电流及电压分配,适合在浏览器端观察滑片移动时电流、电压和灯泡亮度的实时变化。

电磁铁规律探究
电路与电磁 · 经典知识

电磁铁规律探究

通过 SVG电池与开关、线圈与铁芯与滑动变阻器,展示电磁铁的磁性强弱与电流大小、线圈匝数相关,适合在浏览器端观察电流通断、电阻变化和匝数改变引起的磁场与吸附力变化。

电路故障排查分析
电路与电磁 · 电学

电路故障排查分析

通过 SVG 电路图、灯泡、电流表与电压表,展示不同故障类型下电流、电压及灯泡状态的变化关系,适合在浏览器端观察断路与短路时的电路现象。

磁场空间分布
电路与电磁 · 电学

磁场空间分布

通过 SVG 磁感线、铁屑阵列与小磁针,展示磁感线的闭合路径、磁场强弱与磁极距离的关系以及小磁针受力方向与磁场方向的对应,适合在浏览器端观察磁感线方向和磁场强弱变化。

正弦式交变电流:发电机核心模型
电路与电磁 · 电磁

正弦式交变电流:发电机核心模型

通过 SVG 3D线圈、磁场方向与法向量,展示线圈在磁场中转动时磁通量与感应电动势的周期性变化及其相位关系,适合在浏览器端观察中性面与峰值面的电磁特征。

伏安法测小灯泡电功率
电路与电磁 · 电学

伏安法测小灯泡电功率

通过 SVG 电路元件、小灯泡与电压表,展示电压与电流乘积决定实际电功率及灯丝电阻温度效应导致的非线性伏安特性,适合在浏览器端观察参数变化对灯泡亮度和仪表读数的影响。

光路与波动

曲线与几何

圆周角定理
曲线与几何 · 几何

圆周角定理

通过 SVG 圆、弧与圆心角、圆周角,展示同一弧对应的圆心角与圆周角的倍数关系,以及同弧所对圆周角相等,适合在浏览器端观察角度变化与规律。

二次函数抛物线基本性质
曲线与几何 · 函数

二次函数抛物线基本性质

通过 SVG 抛物线、顶点与系数关系,展示二次函数参数变化对开口方向、对称轴及截距的影响,适合在浏览器端观察系数变化与图像形态关联。

二次函数与x轴交点研究
曲线与几何 · 函数

二次函数与x轴交点研究

通过 SVG 抛物线、x轴与交点,展示二次函数图像与x轴的交点个数由判别式Δ的正负决定,适合在浏览器端观察开口变化和交点位置关系。

正三棱锥外接球与内切球模型
曲线与几何 · 几何

正三棱锥外接球与内切球模型

通过 SVG 正三棱锥、外接球与内切球,展示球心到顶点与底面距离的关系、半径与几何体尺寸的关联,适合在浏览器端旋转观察球体位置与截面关系。

整式乘法与多项式展开
曲线与几何 · 代数

整式乘法与多项式展开

通过 SVG 多项式项、系数变化与展开过程,展示整式乘法中各项相乘与合并同类项的关系,适合在浏览器端观察分配律展开时的项数变化与系数调整。

样本与总体的关系(利用样本估计总体)
曲线与几何 · 概率统计

样本与总体的关系(利用样本估计总体)

通过 SVG 样本数据点、总体分布与抽样估计,展示样本与总体的关系以及利用样本估计总体参数的过程,适合在浏览器端观察样本统计量的变化。

微观与物质

DNA双螺旋空间结构
微观与物质 · 遗传

DNA双螺旋空间结构

通过 SVG 双螺旋骨架、碱基对与氢键,展示碱基互补配对与氢键数量差异及分子大小对螺旋直径恒定的影响,适合在浏览器端观察结构变化与配对关系。

有丝分裂各时期染色体行为
微观与物质 · 细胞

有丝分裂各时期染色体行为

通过 SVG 染色体、纺锤丝与着丝粒,展示染色体形态变化、着丝粒分裂及染色体向两极移动的过程,适合在浏览器端观察有丝分裂各时期染色体行为的动态演变。

物质跨膜运输微观对比
微观与物质 · 细胞

物质跨膜运输微观对比

通过 SVG 自由扩散分子模型、协助扩散载体蛋白与主动运输泵蛋白,展示顺浓度梯度扩散、载体蛋白构象改变与主动运输中ATP驱动的逆浓度转运的对比关系,适合在浏览器端观察三种运输方式的状态切换与动态比较。

植物细胞结构
微观与物质 · 细胞

植物细胞结构

通过 SVG 细胞壁、液泡与叶绿体,展示细胞失水过程中液泡体积、细胞膜位置与细胞壁之间的动态变化及质壁分离现象,适合在浏览器端观察质壁分离过程与结构关系。

光合作用微观演示
微观与物质 · 细胞

光合作用微观演示

通过 SVG 叶绿体剖面、二氧化碳分子与氧气分子,展示光能、二氧化碳和水在叶绿体中转化为氧气和有机物,受限制因子影响,适合在浏览器端观察物质转化过程和条件限制。

元素周期表
微观与物质 · 微观

元素周期表

通过 SVG 元素周期表布局、元素方块与原子结构示意图,展示同一周期或同一族元素的核外电子排布规律及最外层电子数变化,适合在浏览器端观察电子层排布与对比。

状态与过程

一氧化碳还原氧化铁
状态与过程 · 实验

一氧化碳还原氧化铁

通过 SVG 氧化铁粉末、一氧化碳气体与石灰水,展示一氧化碳与氧化铁反应过程中物质颜色变化、石灰水浑浊程度与尾气燃烧现象的关联,适合在浏览器端观察反应进程。

四冲程内燃机工作原理
状态与过程 · 热学

四冲程内燃机工作原理

通过 SVG 活塞、曲轴与进排气门,展示四冲程循环中活塞运动、气门开闭与曲轴转角的对应关系,适合在浏览器端观察机械联动与能量状态变化。

等高线地形:五大典型地貌判读
状态与过程 · 地图

等高线地形:五大典型地貌判读

通过 SVG 三维地貌模型、等高线平面图与陡崖标记,展示等高线疏密与地形坡度、重叠与陡崖的对应关系,适合在浏览器端观察地形起伏与等高线变化的关系。

粗铜精炼与极化状态演示
状态与过程 · 原理

粗铜精炼与极化状态演示

通过 SVG 阳极粗铜、阴极纯铜与浓度探针,展示电解精炼中两极质量变化、杂质沉降与浓差极化引起的浓度分布差异,适合在浏览器端观察粗铜溶解、纯铜析出及浓度梯度形成过程。

山地垂直自然带谱动态解析
状态与过程 · 自然

山地垂直自然带谱动态解析

通过 SVG 山脉剖面、自然带分布与雪线,展示山脉阴阳坡与迎背风坡对雪线和林线分布的影响,适合在浏览器端观察垂直带谱随海拔的变化规律。

反射弧结构与神经传导
状态与过程 · 生理

反射弧结构与神经传导

通过 SVG 感受器、传入神经与神经中枢,展示反射弧中神经冲动传导路径及感觉产生的时间差,适合在浏览器端观察缩手反射中信号传递与感觉形成的先后关系。