将SVG导出为SVG内的图像

我正在尝试制作一个网站，您可以使用Raphael.js在另一张图像上绘制图像。 绘图部分已完成，我可以将这些行导出为png。 我将图像插入到由函数paper.image()生成的SVG raphael中; 不幸的是我的导出功能不包括导入的图像。

这些是我正在使用的脚本，但我不认为我全部使用它们。

<script src="../jquery-2.0.1.min.js"></script>
<script src="raphael-min.js"></script>
<script src="rgbcolor.js"></script>
<script src="canvg.js"></script>
<script src="StackBlur.js"></script>
<script src="svg.min.js"></script>

这里是导出函数$（'＃save'）。onmousedown ...

var canvas = document.getElementById('canvas2');
var svg = document.getElementById('canvas');
svg = svg.innerHTML;
canvg(canvas, svg);
var img_url = canvas.toDataURL('image/png');
$('#converted_image').attr('src', img_url);
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');

这是我如何通过一个代表图像$('#img1').onmousedown的按钮导入图像...

paper.clear();
var c = paper.image("images/img1.png", 10, 10, 200, 200);

下面是带有图像和白线的dom-tree的输出结果。

<div id="canvas">
    <svg height="300" version="1.1" width="300" 
         xmlns="http://www.w3.org/2000/svg"
         style="overflow: hidden; position: relative; " id="canvassvg">
        <desc>Created with Raphaël 2.1.0</desc>
        <defs></defs>
        <image x="10" y="10" width="200" height="200"
               preserveAspectRatio="none" href="images/img1.png">
        </image>
        <path style="stroke-linecap: round; stroke-linejoin: round; "
              fill="none" stroke="#ffffff" 
              d="M383,201L383,201L383,202L383,203"
              stroke-linecap="round" stroke-linejoin="round" stroke-width="4">
        </path>
    </svg>
</div>

非常感谢您的回复，请原谅我的英语。

---

我已经使用Batik成功完成了这个任务，你可以在这里下载：http://xmlgraphics.apache.org/batik/tools/rasterizer.html

一旦你有了SVG，只需要将svg保存到一个文件并传递给蜡染，就完成了！ 输出一个非常漂亮的PNG（甚至可以在远程包含图像时使用）。

---

你尝试过Canvas drawImage（）方法吗？

示例：https：//developer.mozilla.org/samples/canvas-tutorial/3_1_canvas_drawimage.html

---

这里提出的答案适用于我！

定义你的Raphael对象之后，你应该做如下的事情：

raphaelObj.attr('xmlns:xlink',"http://www.w3.org/1999/xlink");

链接地址: http://www.djcxy.com/p/77331.html

上一篇: export SVG to PNG with image inside SVG

下一篇: How to change color of SVG image using CSS (jQuery SVG image replacement)?