Question

我有以下svg图像到png图像＆amp; pdf图像，300 DPI。

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <defs>
  <filter height="200%" width="200%" y="-50%" x="-50%" id="svg_1_blur">
   <feGaussianBlur stdDeviation="10" in="SourceGraphic"/>
  </filter>
 </defs>
 <g>
  <title>Layer 1</title>
  <image filter="url(#svg_1_blur)" xlink:href="images/logo.png" id="svg_1" height="162.999996" width="223.999992" y="99" x="185"/>
  <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_2" y="210" x="289" stroke-width="0" stroke="#000000" fill="#000000">sdfdsdsfsdf</text>
 </g>
</svg>

我想用PHP做这个，我已经将滤镜应用到图像的模糊滤镜，我想保留它。

此外，我在IE中查看此图像时遇到问题，因为它不会在IE9上显示模糊效果。有什么建议吗？

Answer 1

您可以使用GD的imagefilter生成类似的内容：

imagefilter($image_res, IMG_FILTER_GAUSSIAN_BLUR);

或

imagefilter($image_res, IMG_FILTER_SMOOTH, (int) $levelOfSmoothness);

但是，对于更复杂的svg，你需要一个SVG renderer。

修改：

或者，如果您对convolution matrices了解得足够多：

$gaussian = array(array(1.0, 2.0, 1.0), array(2.0, 4.0, 2.0), array(1.0, 2.0, 1.0)); imageconvolution($image, $gaussian, 16, 0);

Answer 2

如果您有可能执行脚本（exec，popen等），phantomjs使用webkit（与Chrome / Safari相同），并且可在所有主要平台上使用。你不能比这更接近浏览器渲染的内容。尝试这样的事情：

exec("phantomjs rasterize.js http://ariya.github.com/svg/tiger.svg tiger.png)";

不要忘记清理（转义文件名或路径中不允许的字符）你传递给phantomjs（文件路径）的参数。

将带过滤器的SVG图像转换为PNG / PDF

2 个答案: