<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=9" ><![endif]-->
<!DOCTYPE html>
<html><head>
<title>Untitled Diagram</title>
<meta charset="utf-8">
<style type="text/css">
body, html{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.pls{
width: 100%;
height: 100%;
}
</style></head>
<body style="overflow: hidden;">
<div class="pls">
<svg width="100%" height="100%"><defs><filter id="dropShadow"><feGaussianBlur in="SourceAlpha" stdDeviation="1.7" result="blur"></feGaussianBlur><feOffset in="blur" dx="3" dy="3" result="offsetBlur"></feOffset><feFlood flood-color="#3D4574" flood-opacity="0.4" result="offsetColor"></feFlood><feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"></feComposite><feBlend in="SourceGraphic" in2="offsetBlur"></feBlend></filter></defs><g transformOrigin="0 0" transform="scale(1,1)translate(28,-72)"><g></g><g><g transform="translate(0.5,0.5)" style="visibility: visible;"><path d="M 220 120 L 220 159.88" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 220 120 L 220 159.88" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"></path><path d="M 220 168.88 L 215.5 159.88 L 224.5 159.88 Z" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 220 168.88 L 215.5 159.88 L 224.5 159.88 Z" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all"></path></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><rect x="160" y="80" width="120" height="40" rx="6" ry="6" fill="#ffffff" stroke="#000000" pointer-events="all"></rect></g><g style=""><g><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 100px; margin-left: 161px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Lamp doesn't work</div></div></div></foreignObject></g></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><path d="M 220 250 L 220 279.88" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 220 250 L 220 279.88" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"></path><path d="M 220 288.88 L 215.5 279.88 L 224.5 279.88 Z" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 220 288.88 L 215.5 279.88 L 224.5 279.88 Z" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all"></path></g><g style=""><g><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 270px; margin-left: 240px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: nowrap; ">Yes</div></div></div></foreignObject></g></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><path d="M 270 210 L 309.88 210" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 270 210 L 309.88 210" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"></path><path d="M 318.88 210 L 309.88 214.5 L 309.88 205.5 Z" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 318.88 210 L 309.88 214.5 L 309.88 205.5 Z" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all"></path></g><g style=""><g><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 200px; margin-left: 295px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: nowrap; ">No</div></div></div></foreignObject></g></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><path d="M 220 170 L 270 210 L 220 250 L 170 210 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all"></path></g><g style=""><g><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 90px; height: 1px; padding-top: 208px; margin-left: 175px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Lamp<br>plugged in?</div></div></div></foreignObject></g></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><rect x="320" y="190" width="120" height="40" rx="6" ry="6" fill="#ffffff" stroke="#000000" pointer-events="all"></rect></g><g style=""><g><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 210px; margin-left: 321px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Plug in lamp</div></div></div></foreignObject></g></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><path d="M 220 370 L 220 419.88" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 220 370 L 220 419.88" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"></path><path d="M 220 428.88 L 215.5 419.88 L 224.5 419.88 Z" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 220 428.88 L 215.5 419.88 L 224.5 419.88 Z" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all"></path></g><g style=""><g><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 410px; margin-left: 240px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: nowrap; ">No</div></div></div></foreignObject></g></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><path d="M 270 330 L 309.88 330" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 270 330 L 309.88 330" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"></path><path d="M 318.88 330 L 309.88 334.5 L 309.88 325.5 Z" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 318.88 330 L 309.88 334.5 L 309.88 325.5 Z" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all"></path></g><g style=""><g><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 320px; margin-left: 295px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: nowrap; ">Yes</div></div></div></foreignObject></g></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><path d="M 220 290 L 270 330 L 220 370 L 170 330 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all"></path></g><g style=""><g><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 90px; height: 1px; padding-top: 328px; margin-left: 175px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Bulb<br>burned out?</div></div></div></foreignObject></g></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><rect x="160" y="430" width="120" height="40" rx="6" ry="6" fill="#ffffff" stroke="#000000" pointer-events="all"></rect></g><g style=""><g><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 450px; margin-left: 161px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Repair Lamp</div></div></div></foreignObject></g></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><rect x="320" y="310" width="120" height="40" rx="6" ry="6" fill="#ffffff" stroke="#000000" pointer-events="all"></rect></g><g style=""><g><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 330px; margin-left: 321px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Replace Bulb</div></div></div></foreignObject></g></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><path d="M 231.04 471 L 220 471 L 220 574.88" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 231.04 471 L 220 471 L 220 574.88" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"></path><path d="M 220 583.88 L 215.5 574.88 L 224.5 574.88 Z" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 220 583.88 L 215.5 574.88 L 224.5 574.88 Z" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all"></path></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><path d="M 220 665 L 220 719.88" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 220 665 L 220 719.88" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"></path><path d="M 220 728.88 L 215.5 719.88 L 224.5 719.88 Z" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 220 728.88 L 215.5 719.88 L 224.5 719.88 Z" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="all"></path></g><g style=""><g><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 698px; margin-left: 240px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: nowrap; ">Yes</div></div></div></foreignObject></g></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><path d="M 220 585 L 270 625 L 220 665 L 170 625 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all"></path></g><g style=""><g><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 90px; height: 1px; padding-top: 623px; margin-left: 175px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Lamp<br>plugged in?</div></div></div></foreignObject></g></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><path d="M 220 730 L 270 770 L 220 810 L 170 770 Z" fill="#ffffff" stroke="#000000" stroke-miterlimit="10" pointer-events="all"></path></g><g style=""><g><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 90px; height: 1px; padding-top: 768px; margin-left: 175px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Bulb<br>burned out?</div></div></div></foreignObject></g></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><path d="M 120 210 L 140 210 L 130 210 L 143.63 210" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 120 210 L 140 210 L 130 210 L 143.63 210" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"></path><path d="M 148.88 210 L 141.88 213.5 L 143.63 210 L 141.88 206.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"></path></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><rect x="-20" y="190" width="140" height="40" rx="6" ry="6" fill="#ffffff" stroke="#000000" pointer-events="all"></rect></g><g style=""><g><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 210px; margin-left: -19px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Plug in lamp</div></div></div></foreignObject></g></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><path d="M 120 340 L 145 340 L 145 330 L 163.63 330" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 120 340 L 145 340 L 145 330 L 163.63 330" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"></path><path d="M 168.88 330 L 161.88 333.5 L 163.63 330 L 161.88 326.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"></path></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><rect x="20" y="320" width="100" height="40" rx="6" ry="6" fill="#ffffff" stroke="#000000" pointer-events="all"></rect></g><g style=""><g><foreignObject style="overflow: visible; text-align: left;" pointer-events="none" width="100%" height="100%"><div style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 98px; height: 1px; padding-top: 340px; margin-left: 21px;"><div style="box-sizing: border-box; font-size: 0; text-align: center; "><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: #000000; line-height: 1.2; pointer-events: all; white-space: normal; word-wrap: normal; ">Plug in lamp</div></div></div></foreignObject></g></g><g transform="translate(0.5,0.5)" style="visibility: visible;"><path d="M 220 170 L 220 150 L 290 150 L 290 270 L 150 270 L 150 210 L 163.63 210" fill="none" stroke="white" stroke-miterlimit="10" pointer-events="stroke" visibility="hidden" stroke-width="9"></path><path d="M 220 170 L 220 150 L 290 150 L 290 270 L 150 270 L 150 210 L 163.63 210" fill="none" stroke="#000000" stroke-miterlimit="10" pointer-events="stroke"></path><path d="M 168.88 210 L 161.88 213.5 L 163.63 210 L 161.88 206.5 Z" fill="#000000" stroke="#000000" stroke-miterlimit="10" pointer-events="all"></path></g></g><g></g><g></g></g></svg></div>
</body></html>
Мне бы хотелось, чтобы диаграмма была отцентрирована по горизонтали и соответствовала ширине и высоте на экране. В настоящее время диаграмма находится на левой стороне, и я получаю вертикальную полосу прокрутки, если я должен был скрыть полосу прокрутки, то моя диаграмма обрезается. Я просмотрел все вопросы, связанные с этим: ширина и высота 100%, наличие контейнера и атрибута preserveAspectRatio. Однако я не могу найти ответы. Любая помощь будет принята с благодарностью!
Выше приведен пример схемы проблемы.