0

我已经在 javascript 中将 SVG 文件加载到内存中。

我想使用 Javascript 替换函数来操作内存中的这些数据。

如您所见，有许多“g”元素。我想将它们全部包装到一个新的 g 元素中，其 id 名为“viewport”。

这是svg（来源）：

<!--?xml version="1.0" ?-->
<svg xmlns="http://www.w3.org/2000/svg" width="822" height="600">
  <defs>
        ....
  </defs>
  <g id="edges" transform="translate(245.296 61.75) scale(0.630539)">
    ....
  </g>
  <g class="null current-task" id="S02" transform="translate(245.296 61.75) scale(0.630539)">
    ....
  </g>
  <g id="S04" transform="translate(245.296 61.75) scale(0.630539)">
    ....
  </g>
</svg>

这就是它应该的样子：

<!--?xml version="1.0" ?-->
<svg xmlns="http://www.w3.org/2000/svg" width="822" height="600">
  <defs>
        ....
  </defs>
  <g id="viewport">
    <g id="edges" transform="translate(245.296 61.75) scale(0.630539)">
      ....
    </g>
    <g class="null current-task" id="S02" transform="translate(245.296 61.75) scale(0.630539)">
    ....
    </g>
    <g id="S04" transform="translate(245.296 61.75) scale(0.630539)">
      ....
    </g>
   </g>
</svg>

如何使用 Javascript 和 Regex（替换函数？）来完成？

4

2 回答 2

0

首先，在 SVG 上使用 Regex 是一个非常糟糕的主意（主题略有不同，但仍然适用RegEx 匹配开放标签，XHTML 自包含标签除外）

您应该能够像使用任何其他类似 DOM 的结构一样使用 jQuery（或类似的）进行操作。

我刚刚对此进行了测试（使用调用，从彼得的答案.wrap()中借用），结果是一个与您需要的结构相匹配的对象：

<!DOCTYPE html>
<html>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
var mySvgMarkup = '<!--?xml version="1.0" ?-->' +
'<svg xmlns="http://www.w3.org/2000/svg" width="822" height="600">' +
  '<defs></defs>' +
  '<g id="edges" transform="translate(245.296 61.75) scale(0.630539)">' +
  '</g>' +
  '<g class="null current-task" id="S02" transform="translate(245.296 61.75) scale(0.630539)">' +
  '</g>' +
  '<g id="S04" transform="translate(245.296 61.75) scale(0.630539)">' +
  '</g>' +
'</svg>';

var $mySvg  = $(mySvgMarkup);
$('g', $mySvg).wrap($('<g id="viewport" />'));
</script>
</body>
</html>
于 2013-07-17T11:38:35.943 回答
0

尝试使用jQuery 解析 XML，然后像处理 DOM 一样操作它。也许像

var svg = $.parseXML(svgAsString);
svg.find("[transform]").wrap($('<g id="viewport" />'))
于 2013-07-17T11:40:13.990 回答