Làm cách nào để có được nine-slice scaling trong SVG? Cụ thể, tôi đang tìm cách xác định đối tượng SVG hoạt động giống như đối tượng chín lát khi được định lại kích thước (một số yếu tố duy trì thứ nguyên của chúng và các yếu tố khác mở rộng với vùng chứa).Chia tỷ lệ chín phần SVG
Nếu bạn muốn áp dụng nó vào một svg, thì thông số CSS3 Borders and backgrounds sẽ giúp bạn thực hiện điều đó nếu bạn tham khảo một svg.
Nếu bạn muốn làm điều đó bên trong tệp svg, thì bạn có thể sử dụng <pattern> (có thể được kết hợp với một số phần tử lồng nhau < svg>) để làm điều tương tự. Các phần tử được lồng nhau < svg> có thể là một cách khác để thực hiện việc này, xem ví dụ: this example. Hoặc sử dụng 9 < sử dụng> các phần tử có các biến đổi khác nhau, mỗi biến có đường dẫn clip khác nhau được áp dụng.
Cảm ơn, đó là những điểm khởi đầu tốt. – Dan
Có lẽ tôi đang thiếu một cái gì đó nhưng ví dụ đó đạt được "Khả năng mở rộng" của nó bằng cách sử dụng một hình chữ nhật với bán kính biên giới, và không phải bằng cách sử dụng một mẫu, lồng nhau svg hoặc sử dụng phần tử. –
Ví dụ này sử dụng svg này làm hình nền css: http://treebuilder.de/svg/svgincss/tv/tv.svg. Con số đó có một số khác là
Bạn cần một cái gì đó giống như một lề xung quanh các yếu tố hình thành các cạnh và trung tâm, để nói với họ để bắt đầu X pixel từ trái/đầu y pixel từ bên phải/dưới. Sử dụng một foreignObject, như thế này:
<foreignObject width="100%" height="100px">
<div xmlns="http://www.w3.org/1999/xhtml" style="margin: 0 100px;">
<svg>
<!-- code here -->
</svg>
</div>
</foreignObject>
tôi đã viết về các phương pháp áp dụng rộng lưới để SVG ở đây: http://w3.eleqtriq.com/2014/03/the-holy-grail-of-image-scaling/ Chúc mừng, Dirk
Dựa trên câu hỏi có liên quan của riêng tôi, tôi bắt đầu nghĩ rằng đây là không thể : http://stackoverflow.com/questions/21763823/possible-to-build-an-svg-that-has-fluid-horizontal-scaling-similar-to-old-table – Egg
Có thể, xem giải pháp của dirk bên dưới. – Egg