For interactive SVG pictures (generated by pygal), black boxes are displayed after splicing

[thaogit]

import pygal # 导入 pygal

bar_chart1 = pygal.Bar() # 创建一个换图对象
bar_chart1.add("FirsrtTry", [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55]) # 添加一些值和对应的序列
bar_chart1.add("SecondTry", [55, 34, 21, 13, 8, 5, 3, 2, 1, 1, 0]) # 再添加另一个序列
bar_chart1.render_to_file("./graph1.svg")

bar_chart2 = pygal.Bar() # 创建一个换图对象
bar_chart2.add("FirsrtTry", [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55]) # 添加一些值和对应的序列
bar_chart2.add("SecondTry", [55, 34, 21, 13, 8, 5, 3, 2, 1, 1, 0]) # 再添加另一个序列
bar_chart1.render_to_file("./graph2.svg")

import svg_stack as ss

doc = ss.Document()

layout1 = ss.HBoxLayout()
layout1.addSVG("graph1.svg", alignment=ss.AlignTop | ss.AlignHCenter)
layout1.addSVG("graph2.svg", alignment=ss.AlignCenter)

layout2 = ss.VBoxLayout()

layout2.addSVG("graph1.svg", alignment=ss.AlignCenter)
layout2.addSVG("graph1.svg", alignment=ss.AlignCenter)
layout2.addSVG("graph1.svg", alignment=ss.AlignCenter)
layout1.addLayout(layout2)

doc.setLayout(layout1)

[astraw]

svg_stack is not very smart about CSS ids (and this could be improved). For now, you can make it work using no_prefix:

import pygal  # 导入 pygal

bar_chart1 = pygal.Bar(no_prefix=True)  # 创建一个换图对象
bar_chart1.add("FirsrtTry", [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])  # 添加一些值和对应的序列
bar_chart1.add("SecondTry", [55, 34, 21, 13, 8, 5, 3, 2, 1, 1, 0])  # 再添加另一个序列
bar_chart1.render_to_file("./graph1.svg")

bar_chart2 = pygal.Bar(no_prefix=True)  # 创建一个换图对象
bar_chart2.add("FirsrtTry", [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55])  # 添加一些值和对应的序列
bar_chart2.add("SecondTry", [55, 34, 21, 13, 8, 5, 3, 2, 1, 1, 0])  # 再添加另一个序列
bar_chart1.render_to_file("./graph2.svg")