使用背景图像填充 SVG 路径元素，无需平铺或缩放

Question

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

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

在类似的问题中： Add a background image (.png) to a SVG circle shape ，最底部的用户似乎表明他使用过滤器而不是模式来实现我想要实现的目标。 但是，当我尝试这样做时，渲染过程中不会考虑实际形状。 渲染图像时不考虑形状边界，这似乎毫无用处。

SVG 中是否有任何方法可以获得类似图案的背景图像行为，但实际上没有将图像平铺成图案？

Answer 1

只需使模式的x ， y ， width和height与路径的边界框匹配即可。 这里你可以分别使用“0”，“0”，“1”和“1”，因为patternUnits默认为objectBoundingBox ，因此单位是相对于边界框表示的。 然后使图案中的图像也具有路径边界框的width和height 。 这次，您需要使用“真实”尺寸。

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

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

Answer 2

我试图将我的第一个比例矢量图形扩展文件实现为作为页面维护的 github 存储库。 我知道过山车会瞄准额外的线条以适应环境。 但我不得不说，没有必要实施模式标语来避免自动模式。 在我的 css 文件夹中，我有一个名为 gradientellipse.svg 的文件，其内容

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!--?xml-stylesheet href="css/styles.css" type="text/css"?-->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs> 
  <ellipse id="myEllipse"
           cx="200"
           cy="70"
           rx="85"
           ry="55">
</ellipse>
    <linearGradient id="grad1"
                    x1="0%"
                    y1="0%"
                    x2="0%"
                    y2="100%">
      
    <stop offset="0%"
          style="stop-color:rgb(255,0,0);stop-opacity:1" />
    <stop offset="100%"
          style="stop-color:rgb(255,255,0);stop-opacity:1" />
</linearGradient>
</defs>
  <use x="5" y="5" href="#myEllipse" fill="url('#grad1')" />
</svg>

网站<defs>上的标语<use>已用句子注明

元素从 SVG 文档中获取节点

我非常喜欢这一点，因为它让我有机会瞄准目标，而不是思考 XML 服务器脚本。