0

私はsvg文字列を持っていますstr="<svg....</svg>":

<svg width="612" height="394" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <rect id="svg_1" height="100" width="77" y="49.25" x="16.75" stroke-width="5" stroke="#000000" fill="#FF0000"/>
  <rect id="svg_2" height="127" width="160" y="176.25" x="343.75" stroke-width="5" stroke="#000000" fill="#FF0000"/>
 </g>
 <g>
  <title>Layer 2</title>
  <rect id="svg_3" height="112" width="174" y="28.25" x="194.75" stroke-width="5" stroke="#000000" fill="#FF0000"/>
  <text transform="matrix(1, 0, 0, 1.07143, 0, -8.80357)" xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_4" y="94.85" x="281.75" stroke-width="0" stroke="#000000" fill="#000000">Hello</text>
  <rect id="svg_5" height="92" width="103" y="20.25" x="422.75" stroke-width="2" stroke="#ff9900" fill="#0000ff"/>
 </g>
</svg>

他の文字列を取得したいのですが、要素がありません。2 番目のレイヤーからテキスト要素を削除するにはどうすればよいですか? 試してみvar fstr = $(str).wrapAll('<div>').find('g:eq(1) text:eq(0)').remove().closest('div').html();ましたが、うまくいきません。解決策はありますか？ありがとう

4

1 に答える 1

1

SVG 文字列に戻るには、XMLSerializer(または対応する同等のもの)を使用する必要があります。

var svg = $(str);
svg.children('g:eq(1)').children('text:first').remove();

function serializeXMLNode(xmlNode) {
    if (typeof window.XMLSerializer != "undefined") {
        return (new window.XMLSerializer()).serializeToString(xmlNode);
    } else if (typeof xmlNode.xml != "undefined") {
        return xmlNode.xml;
    }
    return "";
}

var strUpdated = serializeXMLNode(svg[0]);
console.log(strUpdated);

フィドルのデモ

于 2013-01-04T17:43:18.773 に答える