PHP a SVG – PHP – Fórum – Programujte.com

Zdravím,

obracím se na Vás s prosbou o radu:

mám SVG obrázek + PHP podmínky, kdy se vybarvují určité části za podmínky, že barva může být použita jen jednou. Ale barva se "chytá" i na to, co nechci - třeba pozadí.

Máte prosím tip, jak to omezit jen na <path...>?

  <svg id="octocat" xmlns="http://www.w3.org/2000/svg" width="1000px" height="350px" viewBox="0 0 446 154.7" style="fill:#fff;stroke: #000;">
    <image style="overflow:visible;" width="2481" height="927" xlink:href="hero.jpg"  transform="matrix(0.24 0 0 0.24 -67.1667 -18.3029)">
    </image>
      <style type="text/css">
    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:none;}
    .st1{fill:#CCCCCC;stroke:#000000;stroke-miterlimit:10;}
</style>
    
          
 <g id="Vrstva_2_1_">
          
         
    <path class="st1" d="M260.3,83.7l-12,0l-7.8,0l-4.5,0l-7.3,0l0.4-1.5C265.9,81.7,408.9,79.3,443,70v-3.5c-8,0.7-80.4,6.4-183.2,4.9
        c0,0-25.3,2.3-33-8.3c0,0-6.9-7.4-4.4-11.2s6.8-5.5,14.2-5.9c7.4-0.4,24.3,0.6,28.9-1.5c4.6-2.1,5.9-3.3,5.1-6
        c-0.8-2.7-10.1-18.8-14.1-22c-1.9-1.5-5.1-2.5-7.9-3.2h-0.8H225h-4.5h-7.8h-12C38.3,20.5,17.5,57,17.5,57v3.5c0,0,20.4-27,134-36.5
        c1.2-0.1,66-4.8,80.5-2.8c0,0,4-0.2,8,3.7c4,3.8,4.6,7.5,3.6,8.3s-1.8,2.4-10.3,2.6c0,0-27.3-0.3-32.8,1.6
        c-5.6,1.9-9.4,3.4-10.5,7.9c0,0,0.1,2.7,5.3,10.2c5.2,7.5,11.1,20.3,17.7,23.3c6.6,3,9.6,3.2,12.2,3.5v0c0.8,0,1.7,0,2.7,0l0.1,1.4
        l-14.4,0l-0.8,0c-2.8,0.6-6,1.7-7.9,3.2c-4,3.2-13.3,19.3-14.1,22c-0.8,2.7,0.5,3.9,5.1,6c4.6,2.1,21.5,1.1,28.9,1.5
        c7.4,0.4,11.7,2.2,14.2,5.9c2.5,3.8-4.4,11.2-4.4,11.2c-7.7,10.7-33,8.3-33,8.3C98.5,143.1,26,137.3,18,136.6l0,3.5
        c35.6,9.8,189.6,12.1,218,12.4l0,0c2.6-0.3,5.6-0.5,12.2-3.5c6.6-3,12.5-15.8,17.7-23.3c5.2-7.5,5.3-10.2,5.3-10.2
        c-1.1-4.5-4.9-6-10.5-7.9c-5.6-1.9-32.8-1.6-32.8-1.6c-8.6-0.2-9.3-1.8-10.3-2.6c-1-0.8-0.4-4.4,3.6-8.2c4-3.8,8-3.7,8-3.7
        c14.5-2,79.3,2.7,80.5,2.8c113.6,9.6,134,36.6,134,36.6l0-3.5C443.5,127.6,422.8,91.1,260.3,83.7z M212.2,49.9
        c-0.6,0.5-1.2,0.8-2.1,0.8c-0.8,0-1.4-0.2-1.9-0.7s-0.8-1-0.9-1.8l1.6-0.2c0.1,0.4,0.2,0.7,0.4,0.9s0.5,0.3,0.8,0.3
        c0.3,0,0.6-0.1,0.9-0.4s0.3-0.6,0.3-1c0-0.4-0.1-0.7-0.3-1s-0.5-0.4-0.8-0.4c-0.2,0-0.5,0-0.8,0.1l0.2-1.3c0.4,0,0.8-0.1,1-0.3
        s0.4-0.5,0.4-0.8c0-0.3-0.1-0.5-0.3-0.7s-0.4-0.3-0.7-0.3c-0.3,0-0.5,0.1-0.7,0.3s-0.3,0.5-0.4,0.9l-1.5-0.3
        c0.1-0.5,0.3-0.9,0.5-1.2s0.5-0.6,0.9-0.7s0.8-0.3,1.3-0.3c0.8,0,1.5,0.3,1.9,0.8c0.4,0.4,0.6,0.9,0.6,1.4c0,0.8-0.4,1.4-1.2,1.8
        c0.5,0.1,0.9,0.3,1.2,0.7s0.4,0.8,0.4,1.3C213,48.8,212.7,49.4,212.2,49.9z M250.6,123.1c-0.2-0.2-0.5-0.4-0.8-0.4
        c-0.2,0-0.5,0-0.8,0.1l0.2-1.3c0.4,0,0.8-0.1,1-0.3s0.4-0.5,0.4-0.8c0-0.3-0.1-0.5-0.3-0.7s-0.4-0.3-0.7-0.3
        c-0.3,0-0.5,0.1-0.7,0.3s-0.3,0.5-0.4,0.9l-1.5-0.3c0.1-0.5,0.3-0.9,0.5-1.2s0.5-0.6,0.9-0.7s0.8-0.3,1.3-0.3
        c0.8,0,1.5,0.3,1.9,0.8c0.4,0.4,0.6,0.9,0.6,1.4c0,0.8-0.4,1.4-1.2,1.8c0.5,0.1,0.9,0.3,1.2,0.7s0.4,0.8,0.4,1.3
        c0,0.8-0.3,1.4-0.8,1.9s-1.2,0.8-2.1,0.8c-0.8,0-1.4-0.2-1.9-0.7s-0.8-1-0.9-1.8l1.6-0.2c0.1,0.4,0.2,0.7,0.4,0.9s0.5,0.3,0.8,0.3
        c0.3,0,0.6-0.1,0.9-0.4s0.3-0.6,0.3-1C250.9,123.6,250.8,123.3,250.6,123.1z"/>
    <path class="st1" d="M240,24.9c-4-3.8-8-3.7-8-3.7c-14.5-2-79.3,2.6-80.5,2.8c-113.6,9.5-134,36.5-134,36.5V70
        c35.4,9.7,176,11.9,203,12.2v0c0,0,0.8,0,2.3,0c1.4,0,2.2,0,2.2,0c-2.6-0.3-5.6-0.5-12.2-3.5c-6.6-3-12.5-15.8-17.7-23.3
        c-5.2-7.5-5.3-10.2-5.3-10.2c1.1-4.5,4.9-6,10.5-7.9c5.6-1.9,32.8-1.6,32.8-1.6c8.6-0.2,9.3-1.8,10.3-2.6S244,28.8,240,24.9z
         M120.6,49.1v1.5h-5.8c0.1-0.6,0.3-1.1,0.6-1.6s0.9-1.2,1.9-2.1c0.7-0.7,1.2-1.2,1.4-1.4c0.2-0.3,0.3-0.7,0.3-1
        c0-0.4-0.1-0.6-0.3-0.8s-0.5-0.3-0.8-0.3c-0.3,0-0.6,0.1-0.8,0.3s-0.3,0.6-0.4,1l-1.6-0.2c0.1-0.9,0.4-1.6,0.9-2s1.2-0.6,1.9-0.6
        c0.8,0,1.5,0.2,2,0.7s0.7,1,0.7,1.7c0,0.4-0.1,0.8-0.2,1.1s-0.4,0.7-0.7,1.1c-0.2,0.3-0.6,0.6-1.1,1.1s-0.8,0.8-1,0.9
        s-0.3,0.3-0.3,0.5H120.6z"/>
    
    <path class="st1" d="M259.8,13.3h-11.2c2.8,0.7,6,1.7,7.9,3.2c4,3.2,13.3,19.3,14.1,22c0.8,2.7-0.5,3.9-5.1,6
        c-4.6,2.1-21.5,1.1-28.9,1.5c-7.4,0.4-11.7,2.2-14.2,5.9s4.4,11.2,4.4,11.2c7.7,10.7,33,8.3,33,8.3C362.6,72.9,435,67.1,443,66.5
        V57C443,57,422.3,20.5,259.8,13.3z M339.9,50.6h-1.6v-6.2c-0.6,0.6-1.3,1-2.1,1.2v-1.5c0.4-0.1,0.9-0.4,1.4-0.8s0.8-0.9,1-1.4h1.3
        V50.6z"/>       
</svg>

<script>

  var _currentFill = "fill:#000";
  var _pouziteBarvy = new Array();
  var _vypln = new Boolean(true);
  $("#octocat").click(function (event) {
      for (i = 0; i < _pouziteBarvy.length; i++){
          if(_pouziteBarvy[i] == _currentFill){
           _vypln = false;
           break;
         }
      }
      if(_vypln){
         var i = _pouziteBarvy.indexOf($(event.target).attr('style'));
if(i != -1) {
        _pouziteBarvy.splice(i, 1);
    }                 
         $(event.target).attr('style', _currentFill);
         _pouziteBarvy.push(_currentFill);
      };
      _vypln = true;             
  })
  var $swatches = $("#swatches");
  $swatches.click(function (event) {
      $swatch = $(event.target);
      loc = [parseInt($swatch.attr('x'), 10), parseInt($swatch.attr('y'), 10)]
      $("#selection", $swatches).attr('x', loc[0]);
      $("#selection", $swatches).attr('y', loc[1]);
      _currentFill = $swatch.attr('style');
  })
</script>

- V tom kodu chazi radek s jquery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

- Dalsi vybarveni se nespusti, dokud se stranka neobnovi.
- Neni tam zadne PHP.
- A tipoval bych, ze vybarveni stredni casti, 3, se dela nahore i dole proto, ze se to nejspis zrcadli, takze zmena se projevi v obou soucasne.Bude treba asi vygenerovat 2 ruzne objekty.