裁剪以适合svg模式

我有一些模式，每个模式中都有一个图像。我需要将图像缩放到其容器（即路径）的全宽或全高，同时保持其比例。本质上，如果您设置

minwidth:100%，它们需要像html图像一样工作；最小高度：100%

我以前很少使用SVG，也不知道要改变哪些属性才能获得这种行为。我一直在尝试各种各样的组合，包括
viewBox
、
preserveSpectratio
、
patternUnits
等等，但我似乎没能得到我想要的。
要想让它发挥作用，你需要了解
objectBoundingBox
单元在SVG中是如何工作的，以及
preserveSpectratio
是如何工作的

渐变、图案和许多其他SVG功能的大小和内容可以根据对象的大小来指定（
path
、
rect
、
circle
），通过指定
objectBoundingBox
作为单位来绘制对象。相反的总是
userSpaceOnUse
，它使用绘制形状的坐标系

对象边界框单位通常是声明图形填充元素的大小和位置的默认值；您可以通过在
元素上设置
patternUnits
属性来更改此设置。但是，用户空间单位通常是内容图形中使用的任何单位的默认值；要更改此设置，请设置
patternContentUnits
属性

因此，第一步：要创建完全填充形状的图案，您需要：


宣布图案的高度和宽度为100%（或1）；默认情况下，这些将相对于边界框进行解释）
声明
patternContentUnits=“objectBoundingBox”
调整内容（图像）的大小，使其高度和宽度为1

不能将100%用作图案内容本身（即图像尺寸）中1个对象边界框单元的同义词；百分比是相对于SVG大小而不是objectBoundingBox进行解释的*

我应该提到，因为您说您的形状是
元素，所以对象边界框是与绘制路径的坐标系垂直的最小矩形，并且包含路径的所有点。它不包括中风。例如，水平直线具有零高度边界框；斜线有一个边框矩形，因此该线是方框的对角线如果路径形状不规则和/或与坐标系对齐不好，则边界框可能比路径大得多。

preserveAspectRatio
属性适用于图像和任何可以具有
viewBox
属性的元素：父级
、嵌套
、
、
和
。对于图像，纵横比是根据图像的固有宽度：高度比计算的，对于所有其他图像，纵横比是根据图像中的宽度：高度数计算的

对于任何一种类型的元素，如果声明的元素高度或宽度与纵横比不匹配，则
preserveAspectRatio
属性将确定内容是否拉伸到适合（
none
），大小是否适合一个维度，以及是否裁剪到另一个维度（
slice
）或者缩小尺寸以适应两个尺寸，并留出额外空间（
满足
）；对于
meet
和
slice
选项，您还可以指定如何对齐空间中的内容

但是，需要注意的是，可用空间的纵横比是在当前坐标系中计算的，而不是在屏幕像素中计算的。因此，如果更高级别的viewBox或转换改变了纵横比，那么即使在当前元素上设置了PreserveSpectRatio属性，情况仍然会发生扭曲

要知道的另一件事是默认值通常是而不是
。对于
和
元素，默认值为
xMidYMid-meet
——即收缩到合适的位置并居中。当然，只有当模式元素具有
viewBox
属性时，此默认值才会对模式元素产生影响（否则，假定它没有要保留的纵横比）

您要为
preserveAspectRatio
使用的值取决于图像和设计：


是否应拉伸图像以适合形状
preserveSpectratio=“none”
是否应保持图像纵横比，但尺寸应完全适合或覆盖形状

在第一种情况下（拉伸），您不需要对
元素执行任何操作（没有viewBox意味着没有纵横比控制），但您确实需要专门关闭图像上的纵横比控制

相反，如果要避免图像失真，则需要：


在
元素上设置
viewBox
和
preserveApectratio
属性
如果需要与默认值不同的内容，请在
上设置
preserveAspectRatio
属性

工作示例


顶行已关闭纵横比控制

<!-- pattern1 - no aspect ratio control -->
<pattern id="pattern1" height="100%" width="100%"
         patternContentUnits="objectBoundingBox">
    <image height="1" width="1" preserveAspectRatio="none" 
           xlink:href="/*url*/" />
</pattern>


最下面一行在图像和图案上都设置了
preserveAspectRatio
（在图案上还设置了
viewBox
）。图像会被裁剪，但不会拉伸

<!-- pattern3 - aspect ratio control on both image and pattern -->
<pattern id="pattern3" height="100%" width="100%"
         patternContentUnits="objectBoundingBox" 
         viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
    <image height="1" width="1"  preserveAspectRatio="xMidYMid slice" 
           xlink:href="/*url*/" />
</pattern>





源图像。原始纵横比为4:6纵向模式

*对2015-04-03
模式的修正实际上并不适合这种用例。最好使用过滤器。@Michaelmull任何过滤器都可以降低浏览器的速度，但我在下面描述的大小和单位注意事项与您在使用
<!-- pattern3 - aspect ratio control on both image and pattern -->
<pattern id="pattern3" height="100%" width="100%"
         patternContentUnits="objectBoundingBox" 
         viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
    <image height="1" width="1"  preserveAspectRatio="xMidYMid slice" 
           xlink:href="/*url*/" />
</pattern>