svg助你画turtle画~

前言

Hi~ o(*￣▽￣*)ブ大家好，我是Elan。

在python学习之旅中我们不免要接触到turtle这个绘画库。

大家可能都看到某些大神似乎能把python turtle玩得惟妙惟肖，

可以用turtle画出极为美妙的画作。

而我们……

用途

今天我要介绍的东西并不能帮你像他们一样NB，

主要有这些用途：

• 为了  应付  用一种别具一格的方式完成作业
• 供  闲的没事  具有闲情雅致的人娱乐
• 供  妄想  梦想成为绘画大神的人使用

具体就是将svg中的（目前只有）线条line、矩形rect、圆circle由turtle画出来。

具体内容

代码

import turtle
import xml.etree.ElementTree as ET


def draw_svg(svg_file):
    # 创建turtle画布
    screen = turtle.Screen()
    screen.setup(800, 600)
    screen.bgcolor("white")

    # 创建turtle对象
    t = turtle.Turtle()
    t.speed(0)  # 设置速度为最快，如果想要慢慢欣赏可以调节速度

    # 解析SVG文件
    tree = ET.parse(svg_file)
    root = tree.getroot()

    # 绘制SVG元素
    for element in root.iter():
        tag = element.tag.split('}')[-1]
        if tag == 'circle':
            draw_circle(t, element.attrib)
        elif tag == 'rect':
            draw_rect(t, element.attrib)
        elif tag == 'line':
            draw_line(t,element.attrib)
            # 可以继续添加其他元素的绘制函数

    # 隐藏turtle并显示绘制结果
    t.hideturtle()
    turtle.done()


def draw_circle(t, attribs):
    cx = 0-(float(attribs['cx'])-400)
    cy = 0-(float(attribs['cy'])-300)
    r = float(attribs['r'])
    t.penup()
    t.goto(cx, cy)
    t.pendown()
    t.circle(r)


def draw_rect(t, attribs):
    x = float(attribs['x'])-400
    y = 0-(float(attribs['y'])-300)
    width = float(attribs['width'])
    height = float(attribs['height'])
    t.penup()
    t.goto(x, y)
    t.pendown()
    for _ in range(2):
        t.forward(width)
        t.right(90)
        t.forward(height)
        t.right(90)

def draw_line(t, attrib):
    x1 = float(attrib['x1'])-400
    y1 = 0-(float(attrib['y1'])-300)
    x2 = float(attrib['x2'])-400
    y2 = 0-(float(attrib['y2'])-300)
    t.penup()
    t.goto(x1, y1)
    t.pendown()
    t.goto(x2, y2)
# 可以继续添加其他元素的绘制函数

if __name__ == "__main__":
    svg_file = r"svg_path"
    draw_svg(svg_file)

解析

首先import turtle以及xml.etree.ElementTree。

xml.etree.ElementTree（以下简称et） 在我的理解里是一个解析xml的库，

svg是xml的一种表达，所以我们会有用到et。

然后创建画布，如果有需要的话这里的参数都可以调的。

能绘制元素在这个代码里有三个，我们分三步走。

这里开头会节选一段来自mdn web docs的介绍。

1.circle

介绍：

<circle> SVGhttps://developer.mozilla.org/zh-CN/docs/Web/SVG 元素是一个 SVG 的基本形状，用来创建圆，基于一个圆心和一个半径。

用法

类别	基本形状元素、图形元素、形状元素
允许的内容	任意数量、任意顺序的下列元素： 动画元素https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element#animation_elements 描述性元素https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element#descriptive_elements

示例

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
</svg>

 我的代码中：

float(attribs['cx'])

float(attribs['y']

就是表示获取圆的x坐标和y坐标，

至于为什么要：

x = float(attribs['x'])-400
y = 0-(float(attribs['y'])-300)

就是由于turtle的特性，你可以试试删掉这些字段看效果，

在此我就不多赘述。

2.rect

<rect>元素是 SVG 的一个基本形状，用来创建矩形，基于一个角位置以及它的宽和高。它还可以用来创建圆角矩形。

用法

类别	基本形状元素、图形元素、形状元素
允许的内容	任意数量、任意顺序的下列元素： 动画元素https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element#animation_elements 描述性元素https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element#descriptive_elements

示例 

<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Simple rectangle -->
  <rect width="100" height="100" />

  <!-- Rounded corner rectangle -->
  <rect x="120" width="100" height="100" rx="15" />
</svg>

基本同上，不多赘述。

3.line 

<line>元素是一个 SVG 基本形状，用来创建一条连接两个点的线。

用法

类别	基本形状元素、图形元素、形状元素
允许的内容	任意数量、任意顺序的下列元素： 动画元素https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element#animation_elements 描述性元素https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element#descriptive_elements

示例

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />

  <!-- 如果不指定描边颜色，则无法看见线条 -->
</svg>

基本同上，不多赘述。

 最后

简单

if __name__ == "__main__":
    svg_file = r"svg_path"
    draw_svg(svg_file)

以下，我们就可以把svg中的矩形、线段、圆形画入turtle了。

测试 

我使用了菜鸟工具的SVG 在线编辑器 | 菜鸟工具 (jyshare.com)https://www.jyshare.com/more/svgeditor/

 来演示（感谢菜鸟工具）

我用线段、矩形和圆写了一个“Elan”

保存后测试

可以看到“Ela”都画出来了，经过探究：

这里的圆并不是<circle>，看来这个方法并不完全通用，只能用于正圆（之前忽略了这一点）。

总结

主体功能很完善。

今天get：svg知识、turtle知识

为了应付用一种别具一格的方式完成作业的同僚同学要来问了，

这样并不能得到直接的turtle代码啊。

其实你可以自己动动小手稍微改编一下，

如果我后期有空的话我也可以专门做一个新的版本，

但我现在要去写作业了（卷子真多）

下回再见！

制作不易，暴点金币