Масштабирование объекта SVG
Вложений: 2
Привет. Подскажите как правильно объявить svg объект, чтобы он занял все свободного пространство экрана и при этом не "вылезал" вниз. Например у меня есть svg (большой код, т.к. в ней просто 17 одинаковых элементов, которые расположены по главной горизонтали):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" height="1088px" style="background:#FFFFFF" version="1.1" width="1088px"> <defs> <style type="text/css"> .default_default { fill: #E4801B; stroke: #000000; stroke-width: 1.0px; } </style> </defs> <g id="root" transform="translate(0,0)"> <g id="Auto" class="default_default" transform=" translate(0,0) rotate(0,32,32)"> <g id="layer0"> <rect y="24" x="0" height="16" width="64" id="c0trumpet"/> <rect y="26" x="3" height="12" width="2" id="c0flow0"/> <rect y="26" x="11" height="12" width="2" id="c0flow1"/> <rect y="26" x="19" height="12" width="2" id="c0flow2"/> <rect y="26" x="27" height="12" width="2" id="c0flow3"/> <rect y="26" x="35" height="12" width="2" id="c0flow4"/> <rect y="26" x="43" height="12" width="2" id="c0flow5"/> <rect y="26" x="51" height="12" width="2" id="c0flow6"/> <rect y="26" x="59" height="12" width="2" id="c0flow7"/> </g> </g> <!-- тут еще 15 групп с id="Auto"--> <g id="Auto" class="default_default" transform=" translate(960,960) rotate(0,32,32)"> <g id="layer0"> <rect y="24" x="0" height="16" width="64" id="c15trumpet"/> <rect y="26" x="3" height="12" width="2" id="c15flow0"/> <rect y="26" x="11" height="12" width="2" id="c15flow1"/> <rect y="26" x="19" height="12" width="2" id="c15flow2"/> <rect y="26" x="27" height="12" width="2" id="c15flow3"/> <rect y="26" x="35" height="12" width="2" id="c15flow4"/> <rect y="26" x="43" height="12" width="2" id="c15flow5"/> <rect y="26" x="51" height="12" width="2" id="c15flow6"/> <rect y="26" x="59" height="12" width="2" id="c15flow7"/> </g> </g> </g> </svg> Auto.html выглядит следующим образом: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <div class="menu"> <a href="Auto.html">Untitled</a> <div> <object id="AutoId" type="image/svg+xml" data="Auto.svg"></object> </div> <script type="text/javascript" src="Auto.js"></script> </div> </body> </html> Таким образом я получаю страницу, которая представлена на рисунке 1. Как видно, не вся svg поместилась на страницу. А хотелось бы получить результат как на второй картинке, т.е. уместить всю svg в область под <a>Untitled</a> так, чтобы вниз страница не прокручивалась. |
ioprst_,
рыть в эту сторону, может кто-то подскажет ещё ... document.addEventListener('DOMContentLoaded', function () { var svgDoc = document.getElementById("AutoId"); var parentTop = svgDoc.getBoundingClientRect().top; var height = document.documentElement.clientHeight-parentTop - 12, width = document.documentElement.clientWidth-10; svgDoc.addEventListener('load', function () { var svg = svgDoc.contentDocument.querySelector("svg"); svg.setAttribute("height", height+"px"); svg.setAttribute("width", width+"px"); var g = svgDoc.contentDocument.querySelector(".default_default:last-child"); g.setAttribute("transform", "translate(" +(width - 70)+","+(height-44)+") rotate(0,32,32)"); }); }); |
Можно обойтись только стилями
<!doctype html> <html lang="ru"> <head> <meta charset="utf-8"> <title>test</title> <style> html, body, .menu { height: 100%; box-sizing: border-box; margin: 0; } .menu { display: flex; flex-direction: column; } .menu > img { min-height: 0; } </style> </head> <body> <div class="menu"> <a href="Auto.html">Untitled</a> <img src="Auto.svg"> </div> </body> </html> Поменял тег object на img. У вас ведь картинка! |
Malleys, не картинка, объект, который будет изменяться в зависимости от поступающих данных (анимация и т.п.).
|
Часовой пояс GMT +3, время: 11:57. |