裁剪以适应SVG模式 [英] Crop to fit an svg pattern

问题描述

我有一些模式，每个模式中都有一个图像.我需要将图像缩放到其容器的全部宽度或高度(即路径)，同时保留其比例.本质上，如果您设置min-width:100%; min-height:100%;

I have patterns that each have a single image in them. I need the images to scale to the full width or height of their containers, which are paths, while retaining their proportions. Essentially, they need to behave like an html image might if you set min-width:100%; min-height:100%;

我以前没有使用过svgs，也不知道要更改哪种属性才能获得这种行为.我一直在尝试viewBox，preserveAspectRatio，patternUnits等的各种组合，但似乎无法获得想要的东西.

I have not used svgs much before and do not know which attributes to change to get this type of behaviour. I've been trying all sorts of combinations of viewBox, preserveAspectRatio, patternUnits and more, but I cannot seem to get what I want.

推荐答案

要使其正常工作，您需要了解objectBoundingBox单元在SVG中的工作方式，以及preserveAspectRatio的工作方式.

To get this to work, you need to understand how objectBoundingBox units work in SVG, and also how preserveAspectRatio works.

可以通过指定path，rect，circle)来指定渐变，图案和许多其他SVG特征的大小和内容>作为单位.相反的总是userSpaceOnUse，它使用绘制形状的坐标系.

The size and content of gradients, patterns and a number of other SVG features can be specified in terms of the size of the object (path, rect, circle) which is being painted by specifying objectBoundingBox as the unit. The opposite is always userSpaceOnUse, which uses the coordinate system that the shape is drawn in.

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

Object bounding box units are usually the default for declaring the size and position of the graphical fill element; you change this by setting the patternUnits property on the <pattern> element. However, user space units are usually the default for any units used in the content graphics; to change this you set the patternContentUnits property.

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

So first step: To create a pattern that completely fills the shape, you need to:

• 将图案的高度和宽度声明为100％(或1)；默认情况下，它们将相对于边界框进行解释.)
• 声明patternContentUnits="objectBoundingBox".
• 调整内容(您的图像)的大小，使其高度和宽度为1.

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

You cannot use 100% as a synonym for 1 object bounding box unit within the pattern content itself (i.e., the image dimensions); percentages are interpreted relative to the SVG size, not the objectBoundingBox.*

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

I should mention, since you say that your shapes are <path> elements, that the object bounding box is the smallest rectangle that is perpendicular to the coordinate system in which the path is drawn and contains all the path's points. It doesn't include stroke. For example a straight horizontal line has a zero-height bounding box; an angled line has a bounding box rectangle such that the line is the diagonal of the box. If your paths are awkwardly shaped and/or not very well aligned with the coordinate system, the bounding box can be much larger than the path.

preserveAspectRatio属性适用于图像以及任何可以具有viewBox属性的元素:父级<svg>，嵌套的<svg>，<symbol>，<marker>和<pattern>.对于图像，长宽比是根据图像的固有宽度:高度比来计算的；对于其他图像，则是根据

The preserveAspectRatio property applies to images and to any element that can have a viewBox property: the parent <svg>, nested <svg>, <symbol>, <marker> and <pattern>. For images, the aspect ratio is calculated from the image's inherent width:height ratio, for all the others it is calculated from the width:height numbers in the viewBox attribute.

对于任一类型的元素，如果声明的元素的高度或宽度与宽高比都不匹配，则preserveAspectRatio属性将确定是否将内容拉伸为适合(none)的大小适合一个尺寸，裁剪成另一个尺寸(slice)或缩小以使两个尺寸都具有额外的空间(meet)；对于meet和slice选项，您还可以指定如何在空间中对齐内容.

For either type of element, if you declare a height or width for the element that doesn't match the aspect ratio, the preserveAspectRatio property determines whether the content will be stretched to fit (none), sized to fit one dimension and cropped in the other (slice) or shrunk to fit both dimensions with extra space (meet); for meet and slice options you also specify how to align the content in the space.

但是，请务必注意，可用空间的纵横比是在当前坐标系中计算的，而不是在屏幕像素中计算的.因此，如果更高级别的viewBox或转换已更改了宽高比，则即使在当前元素上设置了prepareAspectRatio属性，仍然可以使事物失真.

However, it is important to note that the aspect ratio of the space available is calculated in the current coordinate system, not in screen pixels. So if a higher-level viewBox or transformation has altered the aspect ratio, things can still be distorted even with a preserveAspectRatio property set on the current element.

要知道的另一件事是，默认值通常是不是 none.对于<image>和<pattern>元素，默认值为xMidYMid meet-即缩小以适合和居中.当然，如果模式元素具有viewBox属性(否则，假定没有要保留的长宽比)，则此默认设置仅对模式元素有影响.

The other thing to know is that the default value is usually not none. For both <image> and <pattern> elements, the default is xMidYMid meet -- i.e., shrink to fit and center. Of course, this default only has an impact on pattern elements if the pattern element has a viewBox property (otherwise, it's assumed to have no aspect ratio to preserve).

preserveAspectRatio要使用什么值取决于图像和设计:

What value you want to use for preserveAspectRatio will depend on the image and design:

• 是否应该拉伸图像以适合形状preserveAspectRatio="none"?
• 是否应保持图像的长宽比，但其大小可以完全适合或覆盖形状?

在第一种情况下(拉伸)，您无需对<pattern>元素做任何事情(没有viewBox意味着没有宽高比控件)，但是您要做需要专门关闭图像上的宽高比控制.

In the first case (stretch), you don't need to do anything to the <pattern> element (no viewBox means no aspect ratio control), but you do need to specifically turn off aspect ratio control on the image.

相反，如果要避免图像变形，则需要:

In contrast, if you want to avoid distortion of the image you will need to:

• 在<pattern>元素上设置viewBox 和 preserveAspectRatio属性；
• 如果要使用不同于默认值的内容，请在<image>上设置preserveAspectRatio属性.

• Set viewBox and preserveAspectRatio properties on the <pattern> element;
• Set the preserveAspectRatio property on the <image> if you want something different than the default.

此小提琴显示了三种获取图案图像以填充形状的方法.

• 第一行的宽高比控制已关闭.

• The top row has aspect control turned off.

<!-- 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>

中间行在<image>元素上具有宽高比控制，因此可以裁剪图片以适合图案，但是当在矩形中绘制图案时，图片仍会失真，因为objectBoundingBox单位定义的坐标系对于高度与宽度是不同的. (因为圆圈的边界框是正方形，所以圆圈中的图像不会失真.)

The middle row has aspect ratio control on the <image> element so the picture is cropped to fit the pattern, but the picture is still distorted when the pattern is drawn in the rectangle because the objectBoundingBox units that define the coordinate system are different for height versus width. (The image in the circle isn't distorted because the circle's bounding box is a square.)

<!-- pattern2 - aspect ratio control on the image only -->
<pattern id="pattern2" height="100%" width="100%"
         patternContentUnits="objectBoundingBox">
    <image height="1" width="1" preserveAspectRatio="xMidYMid slice" 
           xlink:href="/*url*/" />
</pattern>

最下面一行在图像和上均设置了preserveAspectRatio(在该图案上还设置了viewBox).图像被裁剪但未被拉伸.

The bottom row has preserveAspectRatio set on both the image and the pattern (and also a viewBox set on the pattern). The image gets cropped but not stretched.

<!-- 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>

源图像来自Wikimedia Commons的Stefan Krause .原始的宽高比是4:6的纵向模式.

Source image by Stefan Krause, from Wikimedia Commons. The original aspect ratio is 4:6 portrait mode.

* 2015年4月3日更正

* Correction on 2015-04-03

这篇关于裁剪以适应SVG模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！