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

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框边框不同,后者是在框的内容之外绘制的.如果要在外部绘制边框,则需要放置矩形以使其在原始(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),上面应该会有效.

(以上所有都是未经测试的,但方法应该是合理的.)