Batik - 将SVG置于图像之上 [英] Batik - put SVG on top of image

问题描述

我有一个图像文件（jpg等）和一些svg图纸（从网站复制的svg标签，如Java String）。 svg绘图与图像文件具有相同的分辨率。我想将svg图纸放在图像的顶部并将其保存为一个文件。我的方法，我并不自豪，但有效，是：

I have an image file (jpg, etc.) and some svg drawings (svg tag copied from the site, as Java String). The svg drawing is of the same resolution as the image file. I want to put svg drawings on top of the image and save it as one file. My approach, of which I'm not proud of, but works, is to:

• 使用Batik的JPEGTranscoder将svg转码为图像svg图纸和白色背景，保存此图片


• 通过在每个像素上执行低级操作，将带有svg图形的图像放在我的图像文件顶部

我希望能够在一步中将svg图纸放在我的图像上。

I would like to be able to put the svg drawings on top of my image in one step.

推荐答案

使用SVG模式可以解决您的问题。

Using an SVG pattern would solve your problem.

<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拉到上面，并且它被正确栅格化。

I pulled the SVG above through the batik rasterizer, and it was correctly rasterized.

更新


如评论中所述，您也可以直接将图像包含在SVG中，而无需使用模式。

Update
As noted in the comments, you could just as well include the image directly in your SVG, without the use of a pattern.

<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 - 将SVG置于图像之上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！