我正在用纯 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 默认值或类似的东西？
开满天机
相关分类