pygal，渲染一个 svg 并在图形字典中返回。我尝试将其嵌入到 web2py 页面中。这样可行。但我不知道如何减小页面上图形的大小。
观点：
{{extend 'layout.html'}}
<h1>Hello {{=request.vars.simulation_id}}</h1>
<figure>
{{=XML(one)}}
{{=XML(two)}}
</figure>
和default.py函数：
def run_simulation():
simulation = start.Simulation()
graphs = simulation.run()
return graphs
【问题讨论】：
貌似pygal支持直接在代码中设置大小：http://pygal.org/web/#iddirectly-in-the-html
您也可以使用 CSS 覆盖 SVG 元素的宽度和高度设置：
.svg-container svg {
height: 240px;
width: 240px;
}
注意：我使用类选择器是假设您可能希望不同的 SVG 图像具有不同的尺寸。如果您希望所有图像的大小相同，那么您应该在 CSS 选择器中只使用 svg。另外值得一提的是，您必须同时覆盖高度和宽度，如果您只做一个，您的 SVG 图像将不会调整大小。
这是一个完整的示例，使用嵌入在 HTML 文件中的 CSS。它表明您可以使用绝对缩放（固定 px 值）以及相对缩放。
<html>
<head>
<!-- CSS embedded in HTML here.
For reusability you could put the CSS in a separate file
and link to it here instead
-->
<style>
/* Add svg-small class to an element to scale the child SVG element(s) to fixed width and height */
.svg-small svg {
height: 24px;
width: 24px;
}
/* Add svg-halfwidth class to an element to scale the child SVG element(s) to half the page width
The height will scale automatically to preserve the aspect ratio. */
.svg-halfwidth svg {
width: 50%;
height: auto;
}
</style>
</head>
<body>
<figure class="svg-small">
<caption>A small droid</caption>
<svg fill="#000000" height="240" viewBox="0 0 24 24" width="240" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/>
</svg>
</figure>
<figure class="svg-halfwidth">
<caption>A scaled droid</caption>
<svg fill="#000000" height="240" viewBox="0 0 24 24" width="240" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/>
</svg>
</figure>
</body>
</html>
根据您生成这些文件的方式，如上所示进行嵌入式 CSS 可能更容易，但通常我会将我的 CSS 分离到一个单独的文件中：
<html>
<head>
<link rel="stylesheet" href="styles.css"/>
<head>
<body> ... as before ... </body>
</html>
那么styles.css就是与上例中<style>标签相同的内容：
.svg-small svg {
height: 24px;
width: 24px;
}
.svg-halfwidth svg {
width: 50%;
height: auto;
}
【讨论】：