我正在用纯 Javascript 制作一个简单的单页应用程序，并希望使用全页 SVG 作为图形基础。我会认为把<svg id="svg" width="100%" height="100%"></svg>在页面正文中就可以解决问题。它几乎有效，但不完全：该页面有一个垂直滚动条（我不希望看到，因为100%不应该意味着“大于 100%”，因此应该没有什么可滚动的）。SVG 左上角在页面内大约 20 像素（在两个维度上）SVG 的右侧被截断——SVG 和滚动条之间大约有 10 个像素列是空白的（我什至不想要也不期望）。为了清楚地显示这些问题，我添加了 Javascript 代码，在检索 SVG 客户端坐标后绘制一个带有 X 的大边界矩形。<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 默认值或类似的东西？
添加回答
举报
0/150
提交
取消