svg 绘制手绘风格的图形

SVG (Scalable Vector Graphics) 是一种基于XML的标准矢量图像格式，特别适合用于绘制手绘风格的图形。SVG 强调可缩放性和文件体积小，能够精确表达形状、路径和颜色，而且支持CSS样式和JavaScript交互。

为了在SVG中创建手绘风格，你可以采用以下几个步骤：

1. **基础元素**: 使用`<svg>`标签开始，设置视口大小和像素密度。例如：```html
<svg width="400" height="400" viewBox="0 0 400 400">

2. **路径描绘**: 利用`<path>`元素，通过M（move-to）、L（line-to）、Q（quadratic Bézier curve）、T（cubic Bézier curve）等命令组合成曲线，模拟手绘笔触。可以调整stroke-width和stroke-linecap属性改变线条粗细和端点形态。

3. **随机化效果**: 可以利用CSS的`filter`属性添加模糊、描边样式变化（如“feGaussianBlur”和“feDropShadow”），或者在JavaScript中动态生成随机颜色和样式，增加手绘感。

4. **渐变和图案**: 使用`<linearGradient>`或`<radialGradient>`创建线性或径向渐变，以及`<pattern>`元素创建重复纹理，也能增强手绘效果。

5. **艺术字**: 通过结合`<text>`和`font-family`选择特定字体，设计手写字体，然后调整字体大小和旋转角度。

<path d="M10 20 Q60 100 100 20" stroke="#8B4513" fill="none" />
<style>
svg text {
font-family: '手绘字体名称';
}
</style>