myGEKKO Systemlibrary SVG

Ein einfaches Türsymbol unter Verwendung von state und stateoff.

<svg viewBox='0 0 100 100'
     width='100%'
     height='100%'
     xmlns='http://www.w3.org/2000/svg'>

  <defs>
    <style>
      .style {
        fill: none;
        stroke: black;
        stroke-width: 4;
        stroke-linejoin: round;
        stroke-linecap: round;
      }

      .state {
        fill: state;
        visibility: state;
      }

      .stateoff {
        fill: state;
        visibility: stateoff;
      }
    </style>
  </defs>

  <g id='door'>

    <rect class='style'
          x='18' y='10'
          width='64' height='80'
          rx='4' ry='4'/>

    <path class='state' d='
      M 25 16
      L 58 22
      L 58 78
      L 25 84
      Z' />

    <path class='stateoff' d='
      M 25 16
      L 75 16
      L 75 84
      L 25 84
      Z' />

    <line class='state'
          x1='49' y1='50'
          x2='54' y2='50'/>

    <line class='stateoff'
          x1='69' y1='50'
          x2='74' y2='50'/>

  </g>
</svg>

Ein fortgeschritteneres Beispiel mit mehreren zustandsabhängigen Elementen.

<svg viewBox='0 0 100 100'
     width='100%'
     height='100%'
     xmlns='http://www.w3.org/2000/svg'>

  <defs>
    <style>
      .style {
        stroke: black;
        stroke-width: 4;
        stroke-linejoin: round;
        stroke-linecap: round;
      }

      .state {
        fill: state;
        visibility: state;
      }

      .stateoff {
        fill: state;
        visibility: stateoff;
      }
    </style>
  </defs>

  <g id='window'>

    <rect class='style'
          x='2' y='6'
          width='96' height='88'
          rx='4' ry='4'
          fill='none' />

    <rect class='state'
          x='8' y='14'
          width='39' height='72'
          rx='2' ry='2' />

    <rect class='state'
          x='53' y='14'
          width='39' height='72'
          rx='2' ry='2' />

    <line class='state'
          x1='8' y1='50'
          x2='47' y2='50'/>

    <line class='state'
          x1='92' y1='50'
          x2='53' y2='50'/>

    <rect class='stateoff'
          x='2' y='6'
          width='96' height='88'
          rx='4' ry='4'/>

    <path class='stateoff'
          d='M 8 14 L 2 8 L 2 92 L 8 86 Z' />

    <path class='stateoff'
          d='M 92 14 L 98 8 L 98 92 L 92 86 Z' />

  </g>
</svg>