Question

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

帮助？

Answer 1

是的，你可以。假设你想要一个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框边框不同，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，则上述情况应该有效。 1}}）。

（以上所有都是未经测试的，但方法应该是合理的。）

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

1 个答案: