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

我不熟悉SVG规范，所以我想知道是否有一种简单的方法可以简单地通过操作DOM在固定宽度的矩形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个用户单位）将位于viewBox内，一半位于viewBox外，因此不会渲染。或者，您可以：

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个单位区域内（例如

），则边框将使其模糊。这与CSS框边框不同，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");

现在，我刚刚想起您正在使用Batik并处理来自Java的文档，但是如果您将其转换为Java DOM调用（例如，

.getDocumentElement（）

而不是

.documentElement

），上述操作应该可以工作

---

（以上所有内容均未经测试，但方法应合理。）

如果没有viewbox，且宽度和高度以单位（例如厘米）指定，您该怎么办。