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

查看:45
本文介绍了使用背景图像填充 SVG 路径元素,无需平铺或缩放的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想做一些非常像填充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.

我想这种行为有点道理,因为它使用了模式.我可以看到我想要的并不是真正的模式"本身.我只想按原样在我的形状中间拍打图像,而不是从中制作图案.但是,我确实希望由我的 SVG 路径定义的形状边界在图像的大小超出这些边界时切断图像的渲染.除了对填充属性使用模式之外,我不知道还有什么其他方法可以得到这种行为,正如在该问题的答案中所做的那样.

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.

在一个类似的问题中:添加背景图片(.png) 到 SVG 圆形 ,最底部的用户似乎表明他使用过滤器而不是模式来实现我想要实现的目标.但是,当我尝试这样做时,在渲染过程中没有考虑实际形状.渲染图像时不考虑形状边界,这似乎毫无用处.

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.

在 SVG 中有什么方法可以获得那种类似图案的背景图像行为,但又不实际将图像平铺成图案吗?

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

推荐答案

只需制作 x, y, width模式的高度 与路径的边界框匹配.你可以只使用 "0","0","1" &这里分别为1",因为patternUnits默认为objectBoundingBox,所以单位是相对于边界框表示的.然后使您的模式中的图像也具有路径边界框的 widthheight .这一次,您需要使用真实"尺寸.

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.

图像将自动在模式中居中,因为 preserveAspectRatio 的默认值正是您想要的.

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆