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

Question

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

domimagesvg

4

我不熟悉SVG规范，所以我想知道是否有一种简单的方法通过操作DOM来构建一个固定宽度的矩形SVG周围的边框。这似乎是可行的，但我不知道从哪里开始探索。

需要帮助吗？

- Stefan Kendall

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- heycam · Accepted Answer

是的，你可以这样做。假设你想要一个由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内部，另一半则位于外部，因此不会被渲染。或者您也可以这样做：

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");

现在，我刚才从你的另一个问题中想起，你正在使用Batik并从Java操作文档，但是如果你将其转换为Java DOM调用（例如.getDocumentElement()而不是.documentElement），上面的内容应该可以工作。

（以上所有内容都未经测试，但方法应该是可靠的。）