0

javascript で SVG ファイルをメモリにロードしました。

Javascript の置換機能を使用して、このデータをメモリ内で操作したいと考えています。

お気づきのように、多くの 'g' 要素があります。それらをすべて「viewport」という ID を持つ新しい g 要素にラップしたいと考えています。

これは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 (replace function?) を使用してこれを行うにはどうすればよいですか?

4

2 に答える 2

0

まず、SVG で Regex を使用するのはかなり悪い考えです (トピックは少し異なりますが、適用可能なRegEx は、XHTML の自己完結型タグを除く開始タグに一致します) 。

他のDOMのような構造と同じように、jQuery（または同様のもの）で操作できるはずです。

これをテストしたところ（Peter's answer.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 に答える