RaphaelJS 转换为 SVG

Question

我正在尝试让用户将SVG图形下载为PNG格式。您可以通过JSFIDDLE访问代码。

SVG转换为CANVAS部分无法工作。

已经添加了canvg和Mozillas的代码，但两者都不起作用。还添加了Canvas2Image，如果画布有元素，则应该可以使用。

- cilerler

Answer 1

感谢开发canvg的gabelerner帮我解决了这个问题。

1. 根据在canvas中保存Raphael JS生成的SVG为PNG时出现问题，剥离svg标签之间所有的空格。
2. 根据在canvas中保存Raphael JS生成的SVG为PNG时出现问题，将图像的href更改为xlink:href。
3. 根据gabelerner，在svg xlmns中添加xmlns:xlink="http://www.w3.org/1999/xlink"。
4. 根据gabelerner，图像必须在同一个域下，不能跨越边界。
5. 根据gabelerner，Canvas2Image无法在框架内工作，这意味着没有FIDDLE（因此我删除了FIDDLE部分以使其更清晰）。

这是你可能需要的示例SVG和JS部分：

var svg_XML_NoSpace = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1024" height="768"><desc>Created with Raphaël</desc><defs></defs><image x="0" y="0" width="1024" height="768" preserveaspectratio="none" xlink:href="http://<mydomain>/<myfolder>/<myfile>"></image><path fill="none" stroke="#ff0000" d="M414,114L722,114" style="stroke-width: 3px;" stroke-width="3"></path></svg>'; //based on gabelerner

//add canvas into body        
var canvasID = "myCanvas";
var canvas = document.createElement('canvas');
canvas.id = canvasID;
document.body.appendChild(canvas);

//convert svg to canvas
canvg(document.getElementById(canvasID), svg_XML_NoSpace, { 
    ignoreMouse: true, ignoreAnimation: true, 
    renderCallback: function () {
         //save canvas as image
         Canvas2Image.saveAsPNG(document.getElementById(canvasID));  
         }
} );

- cilerler

Answer 2

尝试使用fabric.js将SVG转换为画布（这里有一个演示, 在侧边栏中单击按钮时，SVG会实时转换为画布）。

Fabric不支持所有SVG功能，但对于简单情况应该可以工作。

以下是使用loadSVGFromURL的示例。

1）您需要拥有<canvas>元素：

<canvas id="my-canvas"></canvas>

2) 从画布中初始化 fabric.Element：

var canvas = new fabric.Element('my-canvas');

3) 通过 XHR 获取 SVG：

canvas.loadSVGFromURL('path_to_your_shape.svg', function(objects, options) {

  // `objects` is now an array of fabric objects representing 
  // svg shapes from the document
  // if it's one shape, we'll just work with that
  // if it's more than one — we'll create a unified group out of it, 
  // using `fabric.PathGroup`

  var loadedObject = objects.length > 1 
    ? new fabric.PathGroup(objects, options) 
    : objects[0];

  // we can now change object's properties like left, top, angle, opacity, etc.
  // this is not necessary, of course

  loadedObject.set({
    left: 123,
    top: 321,
    angle: 55,
    opacity: 0.3
  });

  // and add it to canvas

  canvas.add(loadedObject);
});

- kangax

---

谢谢您的迅速回复，我在文档或演示中找不到任何将SVG转换为Canvas的函数。如果要求我先解析SVG，那对我来说不是正确的解决方案。我错过了什么吗？请给予建议。谢谢。 - cilerler

更新了一个示例。这样更清晰吗？对你有用吗？fabric 的作用是创建自己的 SVG 形状表示，并在画布上呈现它们。它允许您以编程方式处理这些对象（例如更改其属性、添加、删除、克隆），并通过 UI 操作它们（例如使用鼠标拖动形状、旋转、缩放等）。 - kangax

我尝试了 Fabric，但我意识到它作为文件添加了太多的负载，所以我放弃了。再次感谢您的时间和关注。 - cilerler