html电池图标代码

HTML电池图标是一个经常使用到的图标，在各种网页和应用程序中都可以看到。这个图标表示设备的电量，通常被设计成一个或多个绿色、黄色或红色矩形，以提醒用户电力的使用情况。

!-- 一个矩形电池图标 -->
    svg width="50" height="25">
    rect x="1" y="1" width="48" height="23" rx="3" ry="3" fill="white" stroke="black" stroke-width="2">
    /rect>
    rect x="5" y="5" width="36" height="15" rx="2" ry="2" fill="green">
    /rect>
    rect x="41" y="9" width="6" height="6" rx="2" ry="2" fill="black">
    /rect>
    /svg>
    

上面的代码中，我们使用 SVG（Scalable Vector Graphics）标签来创建电池图标。我们首先创建一个 50x25 的画布（svg width="50" height="25"> ），然后创建一个白色的矩形（rect x="1" y="1" width="48" height="23" rx="3" ry="3" fill="white" stroke="black" stroke-width="2"> /rect> ）来作为电池的外框，填充和描边的颜色是白色和黑色。

接着，我们创建一个矩形（rect x="5" y="5" width="36" height="15" rx="2" ry="2" fill="green"> /rect> ）来表示电池的电量，这个矩形的填充颜色是绿色，宽度和高度是 36x15，圆角的大小是 2px。最后，我们在电池的右上角添加一个黑色正方形（rect x="41" y="9" width="6" height="6" rx="2" ry="2" fill="black"> /rect> ），用来表示电池的正极。

通过这些简单的标签和属性，我们就可以轻松地创建一个漂亮的 HTML 电池图标了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！