使用svg绘制空心同心圆 长宽都是48dp

可以使用SVG的circle元素来绘制空心同心圆，设置圆的半径即可。具体代码如下：

<svg width="48dp" height="48dp">
<circle cx="24" cy="24" r="20" stroke="black" stroke-width="2" fill="none" />
<circle cx="24" cy="24" r="10" stroke="black" stroke-width="2" fill="none" />
</svg>

相关问题

使用SVG画出空心的圆圈

以下是使用 SVG 代码画出一个空心的圆圈的示例：

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="#000" stroke-width="2" fill="none" />
</svg>

解释：

1. `<svg>`：定义一个 SVG 画布；
2. `viewBox`：定义画布的宽高比例和显示区域；
3. `<circle>`：绘制一个空心圆形；
4. `cx`、`cy`、`r`：圆心坐标和半径；
5. `stroke`：边框颜色；
6. `stroke-width`：边框宽度；
7. `fill`：填充颜色。

效果如下：


使用svg 绘制一条曲线

可以使用 SVG 的 `path` 元素来绘制一条曲线。下面是一个例子：

<svg width="200" height="200">
  <path d="M 20,100 Q 100,20 180,100" fill="none" stroke="black" />
</svg>

这个例子会在一个 200x200 的 SVG 画布上绘制一条从 (20, 100) 开始，以 (100, 20) 为控制点，到 (180, 100) 结束的二次贝塞尔曲线。

其中 `d` 属性描述了路径，它的值是一系列的命令和参数，用空格分隔。`M` 命令表示将画笔移动到指定位置，`Q` 命令表示绘制一个二次贝塞尔曲线，后面跟着两个点，第一个是控制点，第二个是终点。

最后两个属性是用来设置线条的颜色和样式的。

你也可以参考这个在线 SVG 路径编辑器：https://www.designer.io/en/tools/svg-path-editor/