Question

我正在尝试使用提交表单的数据手动构建SVG。

现在我想像这样在SVG中添加一个图像：

<image x='" + parseFloat(element.left) + "' y='" + parseFloat(element.top) + "' width='" + parseInt(element.width) + "' height='" + parseInt(element.height) + "' xlink:href='" + element.data + "' />

如果我现在解析我的完整SVG代码，它会产生以下结果：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="160" height="90">
  <rect width="160" height="90" style="fill:rgb(255, 255, 255);stroke:rgb(0,0,0);stroke-width:0"></rect>
  <img x="64" y="29" width="32" height="32" xlink:href="http://allette-bunt-tattoo.de/wp-content/themes/Allettebunt/images/twitter-icon.png">
</svg>

哪个看起来对我来说正确（图像标记除外，从<image>转换为<img>）...

现在奇怪的是输出到浏览器/ DOM：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="160" height="90">
  <rect width="160" height="90" style="fill:rgb(255, 255, 255);stroke:rgb(0,0,0);stroke-width:0"></rect>
</svg>
<img x="64" y="29" width="32" height="32" xlink:href="http://allette-bunt-tattoo.de/wp-content/themes/Allettebunt/images/twitter-icon.png">

SVG渲染正确，但图像显示在SVG旁边。

我搜索了一对“SVG添加图片”教程，所有这些教程看起来像我一样，它适用于他们。我的情况怎么了？

//修改 我像这样构建SVG：

  var svg = $("<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='" + parseInt(stampy.editor.width) + "' height='" + parseInt(stampy.editor.height) + "'></svg>");

  svg.append("<rect width='" + parseInt(stampy.editor.width) + "' height='" + parseInt(stampy.editor.height) + "' style='fill:" + stampy.editor.background + ";stroke:rgb(0,0,0);stroke-width:" + (parseInt(stampy.editor.border) * 2) + "' />");

  svg.append("<image x='" + parseFloat(element.left) + "' y='" + parseFloat(element.top) + "' width='" + parseInt(element.width) + "' height='" + parseInt(element.height) + "' xlink:href='" + element.data + "' />");

  svg = $('<div>').append(svg.clone()).html();
  //alert(svg);
  $(this).html(svg);

SVG里面的图像出现在外面，为什么？

0 个答案: