Question

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

Answer 1

看起来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;
}

将pygal嵌入web2py中

1 个答案: