Я делаю простое одностраничное приложение на простом Javascript и хочу использовать SVG в качестве полностраничной графики в качестве основы для графики.
Я бы подумал, что добавление
<svg id="svg" width="100%" height="100%"></svg>
в теле страницы сделает свое дело.Это почти работает, но не совсем:
- страница имеет вертикальную полосу прокрутки (чего я бы не ожидал, потому что
100% не должно означать «больше 100%» и, следовательно, ничего не должно бытьвыделите). - верхний левый угол SVG составляет около 20 пикселей на страницу (в обоих измерениях)
- правая сторона SVG обрезана - пустые столбцы с 10 пикселямимежду SVG и полосой прокрутки (которую я даже не хочу и не ожидаю).
Чтобы ясно показать эти проблемы, я добавил код Javascript, чтобы нарисовать большой ограничивающий прямоугольник с X после получениякоординаты клиента SVG.
<html><body>
<svg id="svg" width="100%" height="100%"></svg>
<script>
let svg = document.getElementById("svg");
function line(x1, y1, x2, y2)
{
let e = document.createElementNS(svg.namespaceURI, 'line');
e.setAttribute('x1', x1);
e.setAttribute('y1', y1);
e.setAttribute('x2', x2);
e.setAttribute('y2', y2);
e.setAttribute('style', 'stroke:#000');
svg.appendChild(e);
}
function frame_rect(r)
{
let e = document.createElementNS(svg.namespaceURI, 'rect');
e.setAttribute('x', r.x);
e.setAttribute('y', r.y);
e.setAttribute('width', r.width);
e.setAttribute('height', r.height);
e.setAttribute('style', 'stroke:#000;fill:none');
svg.appendChild(e);
}
onresize = function()
{
svg.innerHTML = ''; // remove all elements from the SVG
let r = svg.getBoundingClientRect();
line(r.x,r.y,r.x+r.width,r.y+r.height);
line(r.x,r.y+r.height,r.x+r.width,r.y);
frame_rect(r);
}
onresize()
</script></body></html>
Есть мысли о том, что расширяет границы SVG?Возможно, какие-то границы по умолчанию, CSS по умолчанию или что-то в этом роде?