Question

我正在尝试创建一个顶部，中部和底部的svg对象，其中顶部和底部具有固定高度，并且固定应该占据顶部和底部之间的所有空间（取决于浏览器窗口的高度或其他包含对象）。以下是一些不起作用的代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="mainSvg" xmlns="http://www.w3.org/2000/svg" version="1.1"
    width="100%" height="100%"
     viewbox="0 0 1000 500"
     preserveAspectRatio="none"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    style="background-color: #cccccc;">

    <svg id="top" x="0" y="0" width="100%" height="50"
     style="overflow: visible;">
        <line x1="0" y1="0" x2="100%" y2="100%"
        style="stroke-width:5; stroke: red;"/>
        <line x1="0" y1="100%" x2="100%" y2="0"
        style="stroke-width:5; stroke: red;"/>
    </svg>

    <svg id="middle" x="0" y="50" width="100%"
     style="overflow: visible;">
        <line x1="0" y1="0" x2="100%" y2="100%"
        style="stroke-width:5; stroke: blue;"/>
        <line x1="0" y1="100%" x2="100%" y2="0"
        style="stroke-width:5; stroke: blue;"/>
    </svg>

    <svg id="bottom" x="0" y="100%" width="100%" height="50"
    style="overflow: visible;">
        <line x1="0" y1="0" x2="100%" y2="-100%"
        style="stroke-width:5; stroke: red;"/>
        <line x1="0" y1="-100%" x2="100%" y2="0"
        style="stroke-width:5; stroke: red;"/>
    </svg>
</svg>

如果你运行它，你会看到顶部出现在顶部，底部出现在底部（借助一点＆＃34; -100％＆＃34; hack）。

中间从顶部开始（y =＆＃34; 50＆＃34;）但由于其高度默认为＆＃34; 100％＆＃34;，它与底部重叠并且确实延伸到可用渲染区域下方。显然，它的高度必须是100％ - 50 - 50＆＃34;，但没有办法表达。 Css有一个很好的功能，你可以说

height: calc(100% - 50 - 50);

但是在svg＆＃34;身高＆＃34;不是可以在css中指定的属性。所以我被卡住了。

请注意，在预期的应用程序中，整个内容将嵌入到html页面中，这些部分的内部将包含复杂的svg，并且我要求整个事物可以通过自动缩放＆＃34;来垂直调整大小。中＆＃34;，主要是因为为了在某些给定尺寸的纸张上打印页面，这是必要的。

在HTML中制作这样一个带有三个div的结构很容易完成，并且在一个紧要关头我可以创建三个这样的＆＃39; div并在其中嵌入三个svg ，但那会很混乱。我希望有一种更简单的方法。

SVG - 顶部固定，中间部分变量，底部固定

0 个答案: