蜡染 - 将 SVG 放在图像之上

Question

我有一个图像文件（jpg 等）和一些 svg 图纸（从站点复制的 svg 标记，作为 Java 字符串）。 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。

我通过 batik rasterizer 拉出了上面的 SVG，它被正确地光栅化了。

更新
如 cmets 中所述，您也可以直接将图像包含在 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。