SVG 九层缩放

Question

如何在 SVG 中获得nine-slice scaling？ 具体来说，我正在寻找一种方法来定义 SVG 对象，这些对象在调整大小时表现得像九个切片对象（一些元素保持其尺寸，而其他元素随容器缩放）。

Answer 1

如果您打算将其应用于 svg，那么如果您引用 svg，CSS3 Borders and backgrounds 规范应该可以帮助您做到这一点。

如果您想在 svg 文件中执行此操作，那么您可以使用 <pattern>（可能与一些嵌套的

Answer 2

您需要在形成边缘和中心的元素周围设置一些边距，以告诉它们从左侧/顶部开始 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/ 干杯，德克