Question

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

Answer 1

如果您打算将其应用于svg，那么CSS3 Borders and backgrounds规范应该可以帮助您在引用svg时执行此操作。

如果您想在svg文件中执行此操作，那么您可以使用<pattern>（可能与一些嵌套的＆lt; svg＆gt;元素组合）来执行类似的操作。嵌套＆lt; svg＆gt;元素可能是另一种方法，请参阅例如this example。或者，使用9＆lt; use＆gt;具有不同变换的元素，每个变换都应用了不同的剪辑路径。

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/ 干杯，德克

SVG九切片缩放

2 个答案: