¿Cómo se puede obtener nine-slice scaling en SVG? Específicamente, estoy buscando una forma de definir objetos SVG que se comporten como objetos de nueve divisiones cuando se cambian de tamaño (algunos elementos mantienen su dimensión y otros escalan con el contenedor).Escalamiento SVG de nueve divisiones
Si pretendía aplicarlo a un svg, la especificación CSS3 Borders and backgrounds debería ayudarlo si hace referencia a una svg.
Si quería decir que quería hacerlo dentro de un archivo svg, entonces podría ser capaz de usar un <pattern> (posiblemente combinado con algunos elementos < svg> anidados) para hacer algo similar. Anidados < svg> los elementos pueden ser otra forma de hacerlo, ver por ejemplo this example. Alternativamente, use 9 < use> elements con diferentes transformaciones, cada una con una ruta de recorte diferente aplicada.
Gracias, esos son buenos puntos de partida. – Dan
Tal vez me falta algo, pero ese ejemplo logra su "escalabilidad" usando un rectángulo con un radio de borde, y no usando un patrón, svg anidado o elemento de uso. –
El ejemplo usa esta svg como una imagen de fondo css: http://treebuilder.de/svg/svgincss/tv/tv.svg. Ese svg tiene otro
Necesita algo así como un margen alrededor de los elementos que forman los bordes y el centro, para decirles que inicien X píxeles de la izquierda/arriba a y píxeles de la derecha/abajo. Use un foreignObject, así:
<foreignObject width="100%" height="100px">
<div xmlns="http://www.w3.org/1999/xhtml" style="margin: 0 100px;">
<svg>
<!-- code here -->
</svg>
</div>
</foreignObject>
me escribió acerca de los métodos de aplicación de la escala rejillas a SVG aquí: http://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/ Cheers, Dirk
Basado en mi propia pregunta relacionada, estoy empezando a pensar que esto no es posible : http://stackoverflow.com/questions/21763823/possible-to-build-an-svg-that-has-fluid-horizontal-scaling-similar-to-old-table – Egg
Es posible, consulte la solución de dirk a continuación. – Egg