6

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
4

1 回答 1

5

看起来pygal支持直接在代码中设置大小：http: //pygal.org/web/#iddirectly-in-the-html

或者，您可以使用 CSS 覆盖 SVG 元素的宽度和高度设置：

.svg-container svg {
        height: 240px;
        width: 240px;
}

注意：我使用类选择器是假设您可能希望不同的 SVG 图像具有不同的尺寸。如果您希望所有图像的大小相同，那么您应该只svg使用 CSS 选择器。还值得一提的是，您必须同时覆盖高度和宽度，如果您只做一个，您的 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;
}
于 2015-07-04T19:09:01.747 回答