蜡染 - 将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。