Nine-slice SVG

Question

How can I get ninefold scaling in SVG? In particular, I’m looking for a way to define SVG objects that behave like nine-slice objects when resized (some elements support their dimension, and others with a container).

Answer 1

If you wanted to apply it to svg, then the CSS3 Borders and backgrounds spec will help you do this if you are referencing svg.

If you meant that you want to do this inside the svg file, then you can use <pattern> (possibly combined with some nested <svg> elements) to do something like this. Nested <svg> elements may be another way to do this, for example, this example . As an alternative, use 9 <use> elements with different transformations, each of which has a different clip path.

Answer 2

You need something like a field around the elements that make up the edges and the center to tell them to trigger the X pixels on the left / top to the y pixels on the right / bottom. Use foreignObject, for example:

<foreignObject width="100%" height="100px"> <div xmlns="http://www.w3.org/1999/xhtml" style="margin: 0 100px;"> <svg> <!-- code here --> </svg> </div> </foreignObject> 

I wrote about methods for applying scaling grids to SVG: http://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/ Cheers, Dirk