Come è possibile ottenere nine-slice scaling in SVG? In particolare, sto cercando un modo per definire oggetti SVG che si comportano come oggetti a nove fette quando ridimensionati (alcuni elementi mantengono le loro dimensioni e altri si ridimensionano con il contenitore).Ridimensionamento a nove sezioni SVG
Se intendevi applicarlo a uno svg, la specifica CSS3 Borders and backgrounds dovrebbe aiutarti a farlo se fai riferimento a un svg.
Se volevi farlo all'interno di un file svg, allora potresti essere in grado di utilizzare uno <pattern> (eventualmente combinato con alcuni elementi nidificati di < svg) per fare qualcosa di simile. Nested < svg> gli elementi potrebbero essere un altro modo per fare ciò, vedi ad esempio this example. In alternativa usa 9 < usa> elementi con diverse trasformazioni, ognuna con un diverso percorso di ritaglio applicato.
Grazie, quelli sono buoni punti di partenza. – Dan
Forse mi manca qualcosa ma quell'esempio raggiunge la sua "Scalabilità" usando un rettangolo con un raggio di confine, e non usando un modello, svg annidato o usa elemento. –
L'esempio utilizza questo svg come immagine di sfondo css: http://treebuilder.de/svg/svgincss/tv/tv.svg. Quello svg ha un altro
Hai bisogno di qualcosa come un margine attorno agli elementi che formano i bordi e il centro, per dire loro di avviare X pixel da sinistra/alto a y pixel da destra/in basso. Utilizzare un foreignObject, come questo:
<foreignObject width="100%" height="100px">
<div xmlns="http://www.w3.org/1999/xhtml" style="margin: 0 100px;">
<svg>
<!-- code here -->
</svg>
</div>
</foreignObject>
ho scritto su metodi di applicazione ridimensionamento griglie in SVG qui: http://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/ Cheers, Dirk
Sulla base della mia domanda relativa, sto cominciando a pensare che questo non è possibile : http://stackoverflow.com/questions/21763823/possible-to-build-an-svg-that-has-fluid-horizontal-scaling-similar-to-old-table – Egg
È possibile, vedere la soluzione di dirk qui sotto. – Egg