蠟染 - 將SVG放在圖像上方

Question

我有一個圖像文件（jpg等）和一些svg圖紙（從站點複製的svg標籤，作爲Java String）。 svg圖形與圖像文件具有相同的分辨率。我想將svg繪圖放在圖像的頂部並將其保存爲一個文件。我的方法，其中，我不感到自豪，但工程，就是​​：

• 使用Batik的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> 

小提琴可用here。

我通過蠟染光柵將上面的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> 

小提琴可用here。