Question

此问题不会影响Chrome，但在Edge和Internet Explorer中是一致的。

我在.cshtml中定义了两个svg：

<div class="row" style="height: 100%;">
<div class="col-sm-1" style="height:inherit;">
    <div class="card" style="height:100%">
        <svg id="bayLegendSVG" viewBox="0 0 112 900" height="100%" width="100%" style="display:block; margin: auto;">
            <g>
                <g name="Empty" style="display:none">
                    <text x="56" y="256" text-anchor="middle">Not Selected</text>
                    <circle class="zoom" cx="56" cy="300" r="31" stroke="lightgrey" stroke-width="12" fill="white"></circle>
                    <text name="count" x="56" y="305" text-anchor="middle">81</text>
                </g>
                <g name="Selected" style="display:none">
                    <text x="56" y="556" text-anchor="middle">Selected</text>
                    <circle class="zoom" cx="56" cy="600" r="31" stroke="orange" stroke-width="12" fill="white"></circle>
                    <text name="count" x="56" y="605" text-anchor="middle">0</text>
                </g>                    
            </g>
            <additional g's...>
        </svg>
    </div>
</div>
<div class="col-sm-7" style="height: inherit;">
    <div class="card" style="height:100%;">
        <svg id="baySVG" viewBox="0 0 788 900" height="100%" width="100%" style="display:block; margin: auto;" >
            <g name="bayText">
                <circle cx="384" cy="6200" r="6170" stroke="darkgrey" stroke-width="1" fill="none" />
                <text x="353" y="20">Top Label</text>
            </g>
            <g name="bayText">
                <circle cx="384" cy="6200" r="5340" stroke="darkgrey" stroke-width="1" fill="none" />
                <text x="334" y="885">Bottom Label</text>
            </g>
            <lots of additional g's...>
        </svg>
</div>
<div>

我正在根据用户的选择对JavaScript中的这些元素进行更改（显示/隐藏某些元素，更改颜色，更改文本等）。

问题在于，用户交互后，即使不启动元素动态更改的交互，也不会显示SVG中的某些或所有元素。 svg的html在那里，并且未设置为隐藏（证明它始终在Chrome中运行）。为了使所有内容按预期显示，我要做的就是调整浏览器的大小，甚至只需单击SVG上的任意位置（所有内容都会立即出现）。

我对svg相当陌生，喜欢他们提供的一切...除此之外。

编辑：当页面高度更改时（从隐藏或显示div到我已发布内容的右侧），似乎出现了此问题。它不会更改SVG的高度，就像您在创建页面时设置的那样。右边的区域会更改并且可以滚动。

我想知道它是否与使用折叠隐藏/显示有关，并且在更新SVG内容后是否出现动画问题。

Answer 1

对不起，但是Edge / Internet Explorer不是一个好的浏览器，他不支持少量的CSS / SVG类。是正常的，请使用chrome。

Edge

1 个答案: