SVG九层缩放 [英] SVG nine-slice scaling

问题描述

如何获得 9切片缩放在SVG中? 具体来说，我正在寻找一种定义SVG对象的方法，该对象在调整大小时的行为类似于九片对象(某些元素保持其尺寸，另一些元素随容器缩放).

How could one obtain nine-slice scaling in SVG? Specifically, I'm looking for a way to define SVG objects that behave like nine-sliced objects when resized (some elements maintain their dimension, and others scale with the container).

推荐答案

如果您打算将其应用于svg，则

If you meant to apply it to an svg, then the CSS3 Borders and backgrounds spec should help you do that if you reference an svg.

如果您想在svg文件中进行操作，则可以使用< pattern> (可能与某些嵌套的< svg>元素结合使用)可以执行类似的操作.嵌套的< svg>元素可能是执行此操作的另一种方法，请参见例如此示例.或者使用9个元素进行不同的转换，每个元素都应用不同的剪切路径.

If you meant you wanted to do it inside an svg file, then you might be able to use a <pattern> (possibly combined with some nested <svg> elements) to do something similar. Nested <svg> elements might be another way to do this, see e.g this example. Alternatively use 9 <use> elements with different transforms, each having a different clip-path applied.

这篇关于SVG九层缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！