蠟染-將SVG放在圖像頂部

Question

我有一個圖像文件（jpg等）和一些svg繪圖（從站點復制的svg標記，如Java String）。 svg繪圖與圖像文件具有相同的分辨率。 我想將svg繪圖放在圖像上方，並將其另存為一個文件。 我的方法引以為傲，但我並不為此感到驕傲，但可以起作用：

• 使用蠟染的JPEGTranscoder將svg轉換為具有該svg圖紙和白色背景的圖像，然后保存該圖像
• 通過對每個像素執行低級操作，將帶有svg圖紙的圖像放在我的圖像文件頂部

我希望能夠一步將svg圖紙放在圖像上。

Answer 1

使用SVG模式可以解決您的問題。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    width="200" height="200">
  <defs>
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="200" width="200">
        <image x="0" y="0" width="200" height="200"
            xlink:href="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"/>
    </pattern>
  </defs>
  <rect width="200" height="200" fill="url(#image)"/>
  <circle cx="100" cy="100" r="50"/>
</svg>

小提琴在這里提供 。

我通過蠟染光柵化器將SVG拉到上方，並且光柵化正確。

更新資料
如評論中所述，您也可以將圖像直接包含在SVG中，而無需使用模式。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      width="200" height="200">
  <image x="0" y="0" width="200" height="200"
      xlink:href="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png"/>
  <circle cx="100" cy="100" r="50"/>
</svg>

小提琴在這里提供 。