Question

[更新]我改写并得到了完美答案here

我认为这不是上述问题的副本，原因如下

我想要一个自助服务终端显示器，其中单个浏览器选项卡是如何全屏显示的（按F11键）。

我想要一个左右列，中间有一个SVG图像。

Here is a minimal implementation:

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>blah</title>
</head>
<body>

    <table border="1" style="width: 90%; margin: auto">
        <tr>
            <td style="width:25%">
                Left column
            </td>                       
            <td style="width:60%; border-width:1px; border-color:red;border-style: solid">

SVG在这里，但是1,300行

            </td>
            <td style="width:15%">
                Right column
            </td>
        </tr>
    </table>    

</body>

如上所述，SVG是1,300行，所以我不会发布它，除非你真的需要它： - ）

我相信只有开始才有意义，而这似乎是我无法做到的。我的SVG标签应该如何用SVG填充表格单元格，缩放以适应，保持高度/宽度比？

目前是

<svg xmlns="http://www.w3.org/2000/svg"
     width="7.22222in" height="10.0444in"
     viewBox="0 0 650 904">

文件的其余部分为path个标记。

这显然是错误的，因为它有一个固定的高度/宽度。请注意，我无法预见各种信息亭设备的屏幕尺寸。

[更新]

This question似乎暗示viewBox必须具有固定的大小，而不是100％ - 是这样吗？

另外，我必须内联SVG（我不知道这是否有所作为）。我无法使用HTML img代码，因为我使用的是AngularJs，而我的一些路径看起来像

   <path id="Top row 1" ng-click='RoomClicked($event, "A-1")'
        fill={{GetFillColour('A-1')}} stroke="black" stroke-width="1"
        d="M 226.00,69.00
           C 226.00,69.00  ...

当我使用img标记时，浏览器会报告错误

Answer 1

如果我使用指向SVG的图像标记，并使用以下CSS，它似乎对我有用（至少在Firefox中）： -

#container img {
    width: 100%;
    max-height: 100%;
}

容器是一个灵活的div，约束SVG的大小（这可能是你的表格单元格）。 SVG填充容器的宽度，比例保持在专业，但如果容器太宽，最大高度开始并按预期限制SVG的高度而不拉伸。

Answer 2

只需取出宽度和高度属性，就可以了。

我的SVG无法扩展

2 个答案: