Эта проблема не затрагивает 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 не будут отображаться после взаимодействия с пользователемдаже взаимодействия, которые не инициируют динамические изменения элементов.HTML для svg есть, и он не установлен на скрытый (доказательство того, что он всегда работает в Chrome).И чтобы все выглядело как задумано, все, что мне нужно сделать, это изменить размер браузера или даже просто щелкнуть в любом месте SVG (все сразу появляется).
Я довольно новичок в svg'sи любите все, что они предоставили ... за исключением этого.
Редактировать: Кажется, что проблема возникает, когда изменяется высота страницы (от скрытия или показа div справа от содержимого, которое я опубликовал),Он не меняет высоту SVG, так как они устанавливаются при создании страницы.Область справа изменяется и является прокручиваемой.
Мне интересно, имеет ли она какое-либо отношение к использованию сворачивания / скрытия свертывания, и возникает ли некоторая проблема с анимацией, возникающей после обновления содержимого SVG.