用没有平铺或缩放的背景图像填充SVG路径元素 [英] Fill SVG path element with a background image without tiling or scaling

问题描述

我想做一些非常类似于填充SVG路径元素与背景图像，除了那里提供的解决方案将平铺图像以填充整个背景区域。我不想那样。如果图像没有填充整个高度或整个宽度，那么我只是希望它在路径形状中居中，让它成为那个。如果我试图通过更改高度/宽度属性来限制行为，那么渲染只是缩放图像，直到它填充至少一个尺寸。

我想这种行为有点合理，因为它使用模式。我可以看到，我想要的其实不是一个模式本身。我只是想在形状中间拍一张照片，而不是从中取出图案。但是，我确实希望由SVG路径定义的形状边界在图像尺寸超出边界时切断图像的渲染。我不知道除了使用fill属性的模式之外，还有其他的行为，就像在这个问题的答案中所做的那样。

在类似的问题中：将背景图像（.png）添加到SVG圆形，最底层的用户似乎表示他使用过滤器而不是模式来实现我想要实现的目标。但是，当我尝试时，在渲染过程中不考虑实际的形状。图像渲染时不考虑形状边界，这看起来几乎没用。

SVG中有没有什么方法可以获得类似于图案的背景图像行为，但没有实际上将图像平铺到一个模式中？

解决方案

只要将 x ， y ，宽度和高度你的路径的边界框。您只需使用0，0，1和 1，因为 patternUnits 默认为 objectBoundingBox ，所以单位是相对于边界框表示的。然后让图案中的图像也具有路径边界框的宽度和高度。这一次，您需要使用真实尺寸。

图像将自动居中在模式中，因为默认值对于< image> ，preserveAspectRatio 完全符合您的要求。

 < svg width =600height =600> < DEFS> < pattern id =imgpatternx =0y =0width =1height =1> < image width =120height =250xlink：href =http://lorempixel.com/animals/120/250//> < /图案> < / DEFS> < path fill =url（#imgpattern）stroke =blackstroke-width =4d =M 100,50 L 120,110 150,90 170,220 70,300 50,250 50,200 70,100 50,70 Z/>< ; / svg>  

I'd like to do something very much like Fill SVG path element with a background-image except that the solution offered there will tile the image to fill the the entire background area. I don't want that. If the image doesn't fill either the entire height or the entire width, then I'd just like it to center within the path shape and let that be that. If I try to restrict the behavior by changing the height/width attributes, then the rendering just scales the image until it fills at least one of the dimensions.

I guess this behavior somewhat makes sense since it uses patterns. I can see that what I want is not really a "pattern" per se. I just want to slap an image in the middle of my shape just as it is, not make a pattern out of it. However, I do want the shape boundaries defined by my SVG path to cut off the rendering of the image, whenever the image's size extends past those boundaries. I don't know else to get that behavior besides the use of a pattern for the fill attribute, as is done in the answer to that question.

In a similar question: Add a background image (.png) to a SVG circle shape , the user at the very bottom seems to indicate that he used a filter rather than a pattern to achieve what I'm seeking to achieve. However, when I try that, no regard is paid to the actual shape during rendering. The image is rendered without any regard to the shape boundaries, which seems pretty much useless.

Is there any way in SVG to get that pattern-like background image behavior but without actually tiling the image into a pattern?

解决方案

Just make the x, y, width and height of the pattern match the bounding box of your path. You can just use "0","0","1" & "1" respectively here because the patternUnits defaults to objectBoundingBox, so the units are expressed relative to the bounding box. Then make the image in your pattern have the width and height of the path bounding box also. This time, you'll need to use "real" sizes though.

The image will be centred in the pattern automatically because the default value of preserveAspectRatio for <image> does exactly what you want.

<svg width="600" height="600">
  
  <defs>
      <pattern id="imgpattern" x="0" y="0" width="1" height="1">
        <image width="120" height="250"
               xlink:href="http://lorempixel.com/animals/120/250/"/>
      </pattern>
  </defs>
  
  
  
  <path fill="url(#imgpattern)" stroke="black" stroke-width="4"
        d="M 100,50 L 120,110 150,90 170,220 70,300 50,250 50,200 70,100 50,70 Z" />

</svg>

这篇关于用没有平铺或缩放的背景图像填充SVG路径元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！