小编Mic*_*ael的帖子

使用背景图像填充SVG路径元素,而不进行平铺或缩放

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

我猜这种行为有点意义,因为它使用模式.我可以看到我想要的并不是一个真正的"模式"本身.我只是想在我的形状中间拍一张图像,而不是制作一个图案.但是,我希望每当图像的大小超过这些边界时,我的SVG路径定义的形状边界就会切断图像的渲染.除了使用fill属性的模式之外,我不知道除了该问题的答案之外的其他行为.

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

在SVG中是否有任何方法可以获得类似模式的背景图像行为,但实际上没有将图像平铺成模式?

html svg image background-image

15
推荐指数
1
解决办法
2万
查看次数

标签 统计

background-image ×1

html ×1

image ×1

svg ×1