Ajouter une bordure autour d'un SVG à largeur fixe?

Question

Je ne connais pas la spécification SVG, donc je me demandais s'il y avait un moyen facile de construire une bordure d'une certaine largeur autour d'un SVG rectangulaire de largeur fixe simplement en manipulant le DOM. Cela semble être faisable, mais je ne sais pas par où commencer.

Aide?

Answer 1

Oui, vous pouvez. Disons que vous voulez avoir une bordure rectangulaire noire de 4 unités utilisateur, et que vous savez que votre SVG a viewBox="0 0 400 300". Vous pouvez le faire, à partir du script:

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

La raison pour laquelle vous utilisez 8 pour la largeur de course est que les traits sont dessinés centrés sur la géométrie. Ainsi, la moitié du trait du rectangle (c'est-à-dire, 4 unités d'utilisateur) se trouvera à l'intérieur de la vue et moitié à l'extérieur et ne sera donc pas rendue. Vous pouvez également faire:

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

pour obtenir le même effet. Notez cependant que si votre document contient du contenu dans la région de 4 unités où la bordure est peinte, par exemple <circle cx="10" cy="10" r="10"/>, la bordure l'obscurcira. Ceci est différent des bordures de boîte CSS, qui sont dessinées en dehors du contenu de la boîte. Si vous voulez dessiner la bordure à l'extérieur, vous devez placer le rectangle de façon à ce qu'il peint juste autour de la zone d'origine (0, 0, 400, 300) et ajuster le viewBox="" de manière à inclure la bordure. Par exemple:

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

Maintenant, je viens de me rappeler de your other question que vous utilisez Batik et manipuler des documents de Java, mais doit travailler dessus si vous traduisez en appelle Java DOM (par exemple .getDocumentElement() au lieu de .documentElement).

(Tous ce qui précède est non testé, mais l'approche doit être son.)