使用背景圖像填充 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 服務器腳本。