蜡染 - 把SVG图像的顶部(Batik - put SVG on top of image)

我有一个图片文件（jpg等）和一些SVG图形（SVG标签从网站复制，因为Java的字符串）。 SVG的图纸是相同的分辨率的图像文件。 我希望把图像的顶部SVG绘图，并将其保存为一个文件。 我的方法，其中，我不感到自豪，但工程，就是​​：

• 使用Batik的JPEGTranscoder转码的SVG转换成图像与这个SVG绘图和白色背景，保存此图像
• 把对我的图像文件的顶部SVG绘图的图像通过对每个像素perfoming低级操作

我希望能够把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>

小提琴可以在这里 。

文章来源: Batik - put SVG on top of image