Как можно получить nine-slice scaling в SVG? В частности, я ищу способ определения объектов SVG, которые ведут себя как объекты с девятью срезами при изменении размеров (некоторые элементы сохраняют свое измерение, а другие - с контейнером).SVG с девятью срезами масштабирования
Если вы хотели применить его к svg, то спецификация CSS3 Borders and backgrounds должна помочь вам сделать это, если вы ссылаетесь на svg.
Если вы имели в виду, что хотите сделать это внутри файла svg, то вы можете использовать <pattern> (возможно, в сочетании с некоторыми вложенными элементами < svg), чтобы сделать что-то подобное. Вложенные элементы < svg> могут быть другим способом сделать это, например, this example. В качестве альтернативы используйте элементы использования 9 <> с различными преобразованиями, каждый из которых имеет различный клип-путь.
Спасибо, это хорошие отправные точки. – Dan
Возможно, мне что-то не хватает, но этот пример достигает своей «Масштабируемости», используя прямоугольник с радиусом границы, а не с помощью шаблона, вложенного svg или используемого элемента. –
В этом примере используется svg как фоновое изображение css: http://treebuilder.de/svg/svgincss/tv/tv.svg. У этого svg есть еще один
Вам нужно что-то вроде поля вокруг элементов, образующих края и центр, чтобы сообщить им, чтобы они запускали X-пиксели слева/сверху на y пикселей справа/снизу. Используйте foreignObject, как это:
<foreignObject width="100%" height="100px">
<div xmlns="http://www.w3.org/1999/xhtml" style="margin: 0 100px;">
<svg>
<!-- code here -->
</svg>
</div>
</foreignObject>
Я писал о методах применения масштабирования сетки в SVG здесь: http://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/ Приветствия, Дирк
Основываясь на моем собственном связанный с этим вопрос, я начинаю думать, что это не возможно : http://stackoverflow.com/questions/21763823/possible-to-build-an-svg-that-has-fluid-horizontal-scaling-similar-to-old-table – Egg
Возможно, см. решение дирха ниже. – Egg