В настоящее время я пытаюсь отобразить встроенный SVG в приложении HTML. SVG - это большой файл, экспортированный из Microsoft Visio. Он отображается правильно при открытии в браузере в виде SVG, однако при вставке в любую HTML-страницу элементы начинают исчезать.
Я пытался связать SVG как объект, Img или iFrame, однако, SVG имеет кликабельные ссылки, и выполнение этих 3 не поддерживает кликабельные ссылки.
Я также использую библиотеку jQuery с другими SVG для панорамирования и масштабирования SVG. Для лучшего пользовательского опыта я показываю модальные перед переходом по ссылкам и хотел бы сохранить это.
Пожалуйста, смотрите прикрепленную картину проблемы.
Это картина только из SVG
Старый SVG
И это изображение встроенного SVG .
Как видите, несколько областей отсутствуют.
Обратите внимание, что SVG - это примерно 100 000 строк кода, поэтому найти проблему практически невозможно, а в целях конфиденциальности я не могу поделиться SVG здесь. Если вы столкнулись с этой проблемой или у вас есть идея, как ее решить, ваша помощь будет принята с благодарностью!
Вот мой фрагмент кода (HTML & JavaScript)
$section.find('.panzoom').panzoom({
$zoomIn: $section.find(".zoom-in"),
$zoomOut: $section.find(".zoom-out"),
$zoomRange: $section.find(".zoom-range"),
$reset: $section.find(".reset"),
transition: false,
increment: 1,
minScale: 1,
maxScale: 12,
exponential: false,
contain: 'automatic',
onEnd: function(e, panzoom, matrix, changed) {
if (changed) {
$("section a").each(function(){
$(this).on("click touchstart", function(e){
if(e.type =='touchstart'){
$('#myModal').show();
hrefValue = $(this).attr("xlink:href");
$('.alert').text("You are navigating to the following external site " + hrefValue + " would you like to continue?");
e.preventDefault();
$('.okBtn').click(function() {
window.open(hrefValue);
$('.modal').hide();
});
$('.cancelBtn').click(function() {
$('.modal').hide();
});
}
if(e.type == "click"){
e.preventDefault();
$('#myModal').hide();
return false;
}
});
});
} else {
$("section a").each(function(){
$(this).on('click touchstart', function(e){
$('#myModal').show();
// alert("Tapped");
hrefValue = $(this).attr("xlink:href");
$('.alert').text("You are navigating to the following external site " + hrefValue + " would you like to continue?");
e.preventDefault();
$('.okBtn').click(function() {
window.open(hrefValue);
// event.preventDefault();
$('.modal').hide();
});
$('.cancelBtn').click(function() {
$('.modal').hide();
});
});
});
}
}
});
<div class="parent">
<div class="map-container panzoom">
{% include 'digitalmap/CyberNB.svg' %}
<!-- <object class='map-container panzoom' style='width:100%; height:100vh;' type="image/svg+xml" data="{% static 'digitalmap/imgs/CyberNB.svg' %}" target="_blank"></object> -->
</div>
</div>