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。

Batik - 将SVG置于图像之上

1 个答案: