在固定宽度的SVG周围添加边框?

是的,你可以。假设您希望有一个4用户单元的黑色矩形边框,并且您知道您的SVG viewBox="0 0 400 300" . 您可以从脚本中执行此操作:

var r = document.createElementNS("http://www.w3.org/2000/svg");
r.setAttribute("width", "400");
r.setAttribute("height", "400");
r.setAttribute("fill", "none");
r.setAttribute("stroke", "black");
r.setAttribute("stroke-width", "8");
document.documentElement.appendChild(r);

使用8作为笔画宽度的原因是笔画以几何图形为中心。因此,矩形的一半笔画(即4个用户单位)将位于视框内,一半位于外部,因此不会渲染。或者,您可以执行以下操作:

var r = document.createElementNS("http://www.w3.org/2000/svg");
r.setAttribute("x", "2");
r.setAttribute("y", "2");
r.setAttribute("width", "398");
r.setAttribute("height", "398");
r.setAttribute("fill", "none");
r.setAttribute("stroke", "black");
r.setAttribute("stroke-width", "4");
document.documentElement.appendChild(r);

达到同样的效果。

但请注意,如果文档的内容位于绘制边框的4个单位区域内,请说 <circle cx="10" cy="10" r="10"/> ,然后边界将使其模糊。这与CSS框边框不同,后者绘制在框内容的外部。如果要在外部绘制边框,则需要放置矩形,使其仅在原始(0、0、400、300)区域周围绘制,并调整 viewBox="" 这样就包括了边界。例如:

var r = document.createElementNS("http://www.w3.org/2000/svg");
r.setAttribute("x", "-2");
r.setAttribute("y", "-2");
r.setAttribute("width", "404");
r.setAttribute("height", "404");
r.setAttribute("fill", "none");
r.setAttribute("stroke", "black");
r.setAttribute("stroke-width", "4");
document.documentElement.appendChild(r);

document.documentElement.setAttribute("viewBox", "-4 -4 408 408");

现在,我只记得 your other question 使用BaTik和操作Java文档,但如果将其转换成Java DOM调用,则上述操作应该有效。 .getDocumentElement() 而不是 .documentElement )

(以上均未经测试,但方法应合理。)