使用SVG绘制简易灯笼

<svg width="330" height="280" viewBox="-100 -130 330 280">
  <rect x="-2" y="-89" width="200" height="5" fill="#F79257" />
  <circle cx="0" cy="20" r="70" fill="#D1495B" />
  <circle
    cx="0"
    cy="-75"
    r="12"
    fill="none"
    stroke="#F79257"
    stroke-width="2"
  />
  <rect x="-17.5" y="-65" width="35" height="20" fill="#F79257" />
  <rect x="-17.5" y="85" width="35" height="20" fill="#F79257" />
</svg>

 学习资料:Day 1: How to Draw Basic Shapes with SVG - SVG Tutorial (svg-tutorial.com)

 里面有25个小案例,很值得推荐学习SVG绘制学习

 案例部分截图:

 

 

### 使用SVG绘制图形的方法 SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,用于描述二维图形及其行为。通过定义各种形状、路径以及文本等内容,可以创建复杂的矢量图。以下是关于如何使用SVG绘制图形的一些方法和示例。 #### SVG基本结构 一个标准的SVG文档通常由`<svg>`标签包裹,其中包含多个子元素来表示不同的图形对象。例如: ```html <svg width="1000" height="1000" xmlns="http://www.w3.org/2000/svg"> <!-- 图形内容 --> </svg> ``` 此代码片段定义了一个宽高均为1000像素的画布[^1]。 #### 基本图形元素 SVG支持多种基础图形元素,包括矩形、圆形、椭圆、线条、多边形等。下面是一些常见的例子: ##### 绘制矩形 可以通过`<rect>`标签绘制矩形: ```html <rect x="50" y="50" width="200" height="100" fill="blue" /> ``` 这段代码将在坐标 (50, 50) 处绘制一个宽度为200px、高度为100px的蓝色矩形[^1]。 ##### 绘制圆形 利用`<circle>`标签可绘制圆形: ```html <circle cx="150" cy="150" r="80" stroke="black" stroke-width="3" fill="red" /> ``` 该代码会在中心位置 `(150, 150)` 创建半径为80px的红色圆形,并带有黑色描边。 ##### 绘制直线 使用`<line>`标签能够绘制一条线段: ```html <line x1="0" y1="0" x2="200" y2="200" stroke="green" stroke-width="4" /> ``` 这会从左上角 `(0, 0)` 到右下角 `(200, 200)` 连接一条绿色粗线。 #### 文字旋转效果 如果希望文字具有特定角度的倾斜,则可通过`transform`属性实现。例如,在原引用中有如下一段代码展示不同方向的文字旋转: ```html <text transform="translate(50, 240) rotate(-90, 0, 0)" font-family="Arial" font-size="30">test -90度</text> ``` 这里先将文本移动到指定位置再应用负九十度的角度变换。 #### 动态生成SVG文件 除了静态HTML页面嵌入外,还可以借助编程语言动态生成SVG内容。比如采用C#编写程序输出相应的字符串形式即可形成完整的SVG文档。 ```csharp using System; class Program { static void Main() { string svgContent = @"<?xml version=""1.0"" standalone=""no""?> <!DOCTYPE svg PUBLIC ""-//W3C//DTD SVG 1.1//EN"" ""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd""> <svg width=""100%"" height=""100%"" viewBox=""0 0 1000 1000"" xmlns=""http://www.w3.org/2000/svg""> <rect x=""50"" y=""50"" width=""200"" height=""100"" fill=""blue""/> <circle cx=""150"" cy=""150"" r=""80"" stroke=""black"" stroke-width=""3"" fill=""red""/> <line x1=""0"" y1=""0"" x2=""200"" y2=""200"" stroke=""green"" stroke-width=""4""/> </svg>"; Console.WriteLine(svgContent); } } ``` 以上是一个简单的控制台应用程序,它打印出了包含三个基本形状的SVG数据流。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

写bug断了电

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值