SVGwrite：导出带背景色和环形填充的PNG/JPG

Question

我最近在用svgwrite这个库写一个小的Python脚本。现在我想让它导出我的图形，并且加上背景颜色，但我觉得可能需要把它转换成其他格式（像png或jpg就可以）。我对svg格式了解不多，但我知道它应该可以直接处理背景颜色。

另外，我正在画两个同心的圆圈，我想把它们之间的空隙填上特定的颜色，就像画一个环一样，但我在文档里找不到怎么做。

提前谢谢你的帮助。

Answer 1

背景

要设置背景颜色，最简单的方法就是画一个填满整个文档的矩形。

<rect width="100%" height="100%" fill="red" />

当然，还有其他方法。SVG 1.2 定义了一个叫 viewport-fill 的东西，但并不是所有的渲染器都支持这个。在大多数浏览器中，使用 background-color 是有效的，但在一些非浏览器的 SVG 渲染器上可能就不行了。所以，最简单的还是用矩形来处理。

环形

我假设你是想要在这个环里面有一个透明的洞？如果是这样，有几种方法可以做到。最直接的方法就是创建一个包含两个子路径的路径。一个是外圈的圆，另一个是内圈的圆。当这两个子路径重叠，并且 fill-rule 属性设置为 evenodd 时，就会形成一个洞。

<path d="M -100,0
         A 100,100, 0,1,0, 100,0
         A 100,100, 0,1,0, -100,0
         M -75,0
         A 75,75, 0,1,0, 75,0
         A 75,75, 0,1,0, -75,0
         Z"
stroke="black" fill="orange" fill-rule="evenodd"/>

这里有个演示

关于 fill-rule 的更多信息可以查看这里：http://www.w3.org/TR/SVG/painting.html#FillRuleProperty

Answer 2

这是一个关于如何创建彩色圆圈的例子。第一个圆圈有填充颜色和不同的边框颜色，所以它看起来就像是两个圆圈，一个小的在上面。第二个圆圈只有边框颜色，填充颜色是'无'，所以它只形成一个环的形状。最后一组圆圈展示了如果把一个圆圈放在另一个圆圈的上面，会把下面的部分遮住。这可能就是你想要的环形效果。

import svgwrite
def create_svg(name):
    SVG_SIZE = 900
    color_list = ["rgb(123, 80, 86)", "rgb(67, 130, 124)", "red"] 
    dwg = svgwrite.Drawing(name, (SVG_SIZE, SVG_SIZE), debug=True)
    # background will be white.
    dwg.add(dwg.rect(insert=(0, 0), size=('100%', '100%'), fill='white'))
    y = 50
    circle_1 = dwg.circle(center=(100, y), r=30, fill='green', 
            stroke='blue', stroke_width=5)
    dwg.add(circle_1)
    circle_2 = dwg.circle(center=(200, y), r=30, fill='none', 
            stroke='blue', stroke_width=5)
    dwg.add(circle_2)
    y += 300
    for i in range(3):
        circle_i = dwg.circle(center=(150, y), r=(100 - 30 * i), 
                fill=color_list[i], stroke='none', stroke_width=0)
        dwg.add(circle_i)
    dwg.save()
if __name__ == '__main__':
    create_svg('filling_annulus.svg')