PHP:在SVG DOM中导航

时间:2016-12-22 13:30:31

标签: php xml dom svg

我尝试在g#results g#template/g#OneOfTheGroups下生成群组,然后进行更改。

我想知道如何更改新创建的论坛#tweTextLine2文字和属性。
如何更改要使用的矩形(如rect#tweBoxStar变为<use>,符号#star保持x,y,长度,宽度与矩形相比)?

如何编辑样式块?
如何在SVG上编辑宽度,高度和视图框值?

<?php
$svg_data = <<<'SVG'
<?xml version="1.0" encoding="utf-8"?>
<!-- comment -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="460px" height="200px" viewBox="0 0 460 200" style="enable-background:new 0 0 460 200;" xml:space="preserve">
    <style type="text/css">.st0{fill:none;stroke:#00FFFF;stroke-width:0.7087;}.st1{fill:#FF0000;}.st2{font-family:ISOCPEUR, ISOCPEUR;}.st3{font-size:37.3524px;}.st4{fill:#ED1C24;}.st5{font-family:Ebrima-Bold, Ebrima;font-weight: 700;}.st6{font-size:68.0315px;}.st7{fill:none;stroke:#000000;stroke-width:0.7087;stroke-miterlimit:10;}.st8{font-size:11.0845px;}.st9{font-size:27.6748px;}.st10{font-size:18.9881px;}.st11{font-size:12px;}.st12{font-size:5.6693px;}.st13{font-size:9.8585px;}.st14{fill:#FF00FF;}.st15{fill:#FFFFFF;}.st16{font-family:ISOCPEURItalic, ISOCPEUR;font-style: italic;}.st17{font-size:12.3452px;}.st18{font-size:6.1644px;}</style>
    <symbol id="Star" viewBox="0 0 100 100">
      <path id="Star" style="fill:#00FF00;" d="M50,3.58L62.5,39H100L70.83,60.95l10.42,34.93L50,74.81L18.75,95.53l10.42-34.51L0,39  h37.5L50,3.58z"/>
    </symbol>
    <g id="TemplateForm">
      <g id="twe">
        <rect id="tweCanvas" x="7.3" y="81.32" class="st0" width="263.03" height="72"/>
        <text id="tweWeekdayShorttext" transform="matrix(1 0 0 1 247.1745 127.5469)" class="st1 st2 st3">V</text>
        <line id="tweDateNumAliignerRight" class="st0" x1="132.02" y1="89.98" x2="132.02" y2="144.66"/>
        <g id="tweDateNumber">
          <text transform="matrix(1 0 0 1 132.2695 140.8158)" class="st4 st5 st6">24</text>
        </g>
        <line id="tweDivider" class="st7" x1="126.49" y1="81.32" x2="126.49" y2="153.31"/>
        <g id="tweText">
          <text id="tweTextLine3" transform="matrix(1 0 0 1 15.6379 100.736)" class="st2 st8">1234567890abcdef12345</text>
          <text id="tweTextLine2" transform="matrix(1 0 0 1 15.6379 114.096)" class="st2 st8">1234567890abcdef12345</text>
          <text id="tweTextLine1" transform="matrix(1 0 0 1 15.6379 127.4562)" class="st2 st8">1234567890abcdef12345</text>
          <text id="tweTextLine0" transform="matrix(1 0 0 1 15.6379 140.8162)" class="st2 st8">1234567890abcdef12345</text>
        </g>
        <rect id="tweBoxMoon" x="216.21" y="121.63" class="st0" width="21" height="21"/>
        <rect id="tweBoxStar" x="216.21" y="92.24" class="st0" width="21" height="21"/>
        <rect id="tweBoxText" x="12.57" y="89.98" class="st0" width="107.92" height="54.68"/>
      </g>
      <g id="twd">
        <rect id="twdCanvas" x="7.3" y="9.32" class="st0" width="263.03" height="72"/>
        <text id="twdWeekdayshorttext" transform="matrix(1 0 0 1 249.5817 41.9174)"><tspan x="0" y="0" class="st2 st3">C</tspan><tspan x="-1.2" y="29.13" class="st2 st3">S</tspan></text>
        <text id="twdDatenumber" transform="matrix(1 0 0 1 41.5544 69.5698)" class="st5 st6">26</text>
        <line id="twdDivider" class="st7" x1="126.49" y1="9.32" x2="126.49" y2="81.32"/>
        <g id="twdText">
          <text id="twdTextLine3" transform="matrix(1 0 0 1 135.0475 28.1718)" class="st2 st8">1234567890abcdef12345</text>
          <text id="twdTextLine2" transform="matrix(1 0 0 1 135.0475 41.5319)" class="st2 st8">1234567890abcdef12345</text>
          <text id="twdTextLine1" transform="matrix(1 0 0 1 135.0475 54.892)" class="st2 st8">1234567890abcdef12345</text>
          <text id="twdTextLine0" transform="matrix(1 0 0 1 135.0475 68.252)" class="st2 st8">1234567890abcdef12345</text>
        </g>
        <line id="twdDateNumAliignerLeft" class="st0" x1="120.02" y1="17.39" x2="120.02" y2="72.07"/>
        <rect id="twdBoxStar" x="15.68" y="19.75" class="st0" width="21" height="21"/>
        <rect id="twdBoxText" x="132.49" y="17.39" class="st0" width="107.92" height="54.68"/>
        <rect id="twdBoxMoon" x="15.68" y="49.15" class="st0" width="21" height="21"/>
      </g>
      <g id="tcl">
        <rect id="tclCanvas" x="7.3" y="153.31" class="st0" width="263.03" height="36"/>
        <line id="tclDivider" class="st7" x1="126.49" y1="153.31" x2="126.49" y2="189.31"/>
        <text id="tclYear" transform="matrix(1 0 0 1 59.1393 183.5269)" class="st2 st9">YYYY</text>
        <text id="tclMonthname" transform="matrix(1 0 0 1 130.9372 182.7798)" class="st2 st10">monthname</text>
      </g>
    </g>
    <g id="results">
    </g>
    </svg>
    SVG;

    $document = new DOMDocument();
    $document->loadXml($svg_data);
    $xpath = new DOMXpath($document);
    $xpath->registerNamespace('svg', 'http://www.w3.org/2000/svg');
    $xpath->registerNamespace('xlink', 'http://www.w3.org/1999/xlink');

    //a loop will start here

    $tType='twd';
    $gTemplate = $xpath->evaluate(
      '/svg:svg/svg:g[@id="TemplateForm"]/svg:g[@id="'.$tType.'"][1]'
    );
    $gResults = $xpath->evaluate(
      '/svg:svg/svg:g[@id="results"]'
    );
    if ($gTemplate->length > 0 && $gResults->length > 0) {
      // simplify variables - only the first value from the lists is needed
      $gTemplate = $gTemplate[0];
      $gResults = $gResults[0];
      $x=40; 
      $y=40;
      // clone the dom nodes with all descendants
      $gResult = $gTemplate->cloneNode(TRUE);
      // change attributes
      $gResult->setAttribute('id', 'result1');
      $gResult->setAttribute('transform', 'matrix(1 0 0 1 '.$x.' '.$y.')');
      $gResults->appendChild($gResult);

      //how to set attribs and content inside the group right here in the code?
      //this below does not work.
      $t1 = $xpath->query('svg:g[@id="results"]/svg:g[@id="result1"]/svg:g[@id="twdText"]/svg:text[@id="twdTextLine0"]');
      $t1[0]="new text";
    //the loop ends here

      echo $document->saveXML();
    }
    ?>

1 个答案:

答案 0 :(得分:0)

我遗漏的是这种语法:

$node = $xpath->query('svg:g[@id="results"]/svg:g[@id="result1"]/svg:g[@id="twdText"]/svg:text[@id="twdTextLine0"]')->item(0);
$node->textContent="new text";