在固定寬度的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"); 

，我剛從your other question記住，你用蠟染和從Java文檔操作，但如果你到Java的DOM調用（例如的替代.getDocumentElement().documentElement）翻譯它上面應該工作。

（以上全部是未經測試，但做法應該是聲。）