是否可以background-image为SVG <path>元素设置？
例如,如果我设置元素class="wall",CSS样式.wall {fill: red;}可以工作,但.wall{background-image: url(wall.jpg)}不会.wall {background-color: red;}.
我有模式,每个模式都有一个图像.我需要将图像缩放到容器的整个宽度或高度,这些容器是路径,同时保留它们的比例.从本质上讲,如果你设置,他们需要表现得像一个HTML图像min-width:100%; min-height:100%;
我以前没有使用过很多svgs,也不知道要改变哪些属性来获得这种行为.我一直在尝试各种组合viewBox,preserveAspectRatio,patternUnits和更多,但我似乎无法得到我想要的东西.
我想做一些非常类似于填充SVG路径元素和背景图像的东西,除了那里提供的解决方案将平铺图像以填充整个背景区域.我不希望这样.如果图像没有填满整个高度或整个宽度,那么我只是喜欢它在路径形状中居中并让它成为那样.如果我尝试通过更改高度/宽度属性来限制行为,则渲染只会缩放图像,直到它填充至少一个维度.
我猜这种行为有点意义,因为它使用模式.我可以看到我想要的并不是一个真正的"模式"本身.我只是想在我的形状中间拍一张图像,而不是制作一个图案.但是,我希望每当图像的大小超过这些边界时,我的SVG路径定义的形状边界就会切断图像的渲染.除了使用fill属性的模式之外,我不知道除了该问题的答案之外的其他行为.
在类似的问题中:将背景图像(.png)添加到SVG圆形状,最底层的用户似乎表明他使用过滤器而不是模式来实现我想要实现的目标.但是,当我尝试这样做时,在渲染过程中不考虑实际的形状.渲染图像时不考虑形状边界,这看起来几乎没用.
在SVG中是否有任何方法可以获得类似模式的背景图像行为,但实际上没有将图像平铺成模式？
我已经看到将 背景图像 (.png) 添加到 SVG 圆形
但就我而言，我需要在不同的图像形状中添加笔画和笔画宽度
这是我的代码：
<svg width="700" height="660">
<defs>
<pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
<image x="0" y="0" xlink:href="url.png"></image>
</pattern>
<pattern id="image2" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
<image x="0" y="0" xlink:href="url2.png"></image>
</pattern>
</defs>
<circle cx = "20%" cy = "20%" r = "20" fill = "url(#image)" stroke-width ="2px" stroke="red"/>
<circle cx = "40%" cy = "20%" r = "20" fill = "url(#image2)" stroke-width ="2px" stroke="red"/>
</svg>
这行不通，第二个圆圈没有填充图像
和这个：
<svg width="700" height="660">
<filter id="this_image" x="0%" y="0%" width="100%" …