SVG Grafik - Objekte vergrößern

[fz21z]

Besteht die Möglichkeit die von mir im Anhang als *.txt deklarierte *.svg Datei insofern zu animieren, das die darin verwendeten Objekte um ein paar Pixel in die Höhe wachsen bei einem Mousover?
Im eigentlichen besteht das Problem so wie sich es darstellt darin, das mir nur die x- und yachse zu verfügung steht. Hätte jm. evtl. eine Idee wie man mittels Javascript, Jquery oder ähnlichem eine weitere Dimension hinzufügen könnte?

 

[Kallisto]

Ich weiß jetzt nicht genau ob es innerhalb des svg-Standard vorgesehen ist Animationen einzubauen. Aber ich sehe nicht das von dir beschriebene Probleme der fehlenden Koordinatenachsen. Dein Lageplan ist doch eine Isometrie! Demnach würde ein in die Höhe wachsen einer Verschiebung in y-Richtung entsprechen (nach oben). Aber wie schon gesagt ich habe keine Ahnung ob das mit dem Animieren überhaupt geht.

 

[Yuuri]

Ich hab zwar keinerlei Ahnung von SVG, aber das hab ich mir grad durch Google zusammengebastelt. Musst nur schauen, dass das Objekt auch oben bleibt.

<rect class="room" x="120" y="-50" width="100" height="140">
  <animate attributeType="XML" attributeName="y" from="-50" to="-70" dur="0.5s" begin="mouseover" end="mouseout" />
  <animate attributeType="XML" attributeName="x" from="120" to="100" dur="0.5s" begin="mouseover" end="mouseout" />
</rect>

 

[fz21z]

Funktioniert, vielen Dank euch beiden!

 

[Yuuri]

Wenn du herausfindest, wie das Objekt beim Mouse Hover oben bleibt, wäre folgendes wohl interessanter:

<rect class="room" x="120" y="-50" width="100" height="140">
  <!-- nach oben fahren -->
  <animate attributeType="XML" attributeName="y" from="-50" to="-70" dur="0.5s" begin="mouseover" end="mouseout" />
  <animate attributeType="XML" attributeName="x" from="120" to="100" dur="0.5s" begin="mouseover" end="mouseout" />
  
  <!-- nach unten fahren -->
  <animate attributeType="XML" attributeName="y" to="-50" from="-70" dur="0.5s" begin="mouseout" end="mouseenter" />
  <animate attributeType="XML" attributeName="x" to="120" from="100" dur="0.5s" begin="mouseout" end="mouseenter" />
</rect>

 

[fz21z]

Wenn du herausfindest, wie das Objekt beim Mouse Hover oben bleibt, wäre folgendes wohl interessanter:

<rect class="room" x="120" y="-50" width="100" height="140">
  <!-- nach oben fahren -->
  <animate attributeType="XML" attributeName="y" from="-50" to="-70" dur="0.5s" begin="mouseover" />
  <animate attributeType="XML" attributeName="x" from="120" to="100" dur="0.5s" begin="mouseout" />
  
  <!-- nach unten fahren -->
  <animate attributeType="XML" attributeName="y" to="-50" from="-70" dur="0.5s" begin="mouseover" />
  <animate attributeType="XML" attributeName="x" to="120" from="100" dur="0.5s" begin="mouseout" />
</rect>

So bleibts oben, interessant wäre jetzt noch, herauszufinden wie man eine Verbindung zwischen Unterer- und Obererebene darstellen könnte, so das das Objekt tatsächlich wächst.

 

[Yuuri]

Ich hab mal eine Javascript Variante gemacht:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="400">
  <script type="text/javascript"><![CDATA[
  
  var svgns = "http://www.w3.org/2000/svg";
  
  function MakeObj( TagName, Attributes )
  {
    var o = document.createElementNS( svgns, TagName );
    for( var property in Attributes )
      o.setAttributeNS( null, property, Attributes[property] );
    return o;
  }
  
  function Growth( obj, GrowthHeight )
  {
    if( !GrowthHeight )
      GrowthHeight = 10;
    
    var o_x = obj.x.baseVal.value;
    var o_y = obj.y.baseVal.value;
    
    var ay_over = MakeObj( 'animate', {
        'attributeType': 'XML',
        'attributeName': 'y',
        'from': (o_y).toString(),
        'to': (o_y - GrowthHeight).toString(),
        'dur': '0.5s',
        'begin': 'mouseover',
        'fill': 'freeze'
      } );
    obj.appendChild( ay_over );
    var ax_over = MakeObj( 'animate', {
        'attributeType': 'XML',
        'attributeName': 'x',
        'from': (o_x).toString(),
        'to': (o_x - GrowthHeight).toString(),
        'dur': '0.5s',
        'begin': 'mouseover',
        'fill': 'freeze'
      } );
    obj.appendChild( ax_over );
    
    var ay_out = MakeObj( 'animate', {
        'attributeType': 'XML',
        'attributeName': 'y',
        'from': (o_y - GrowthHeight).toString(),
        'to': (o_y).toString(),
        'dur': '0.5s',
        'begin': 'mouseout',
        'fill': 'freeze'
      } );
    obj.appendChild( ay_out );
    var ax_out = MakeObj( 'animate', {
        'attributeType': 'XML',
        'attributeName': 'x',
        'from': (o_x - GrowthHeight).toString(),
        'to': (o_x).toString(),
        'dur': '0.5s',
        'begin': 'mouseout',
        'fill': 'freeze'
      } );
    obj.appendChild( ax_out );
  }
  
  function GrowthMul( objs, GrowthHeight )
  {
    for( var i = 0; i < objs.length; i++ )
      Growth( objs[i], GrowthHeight );
  }

  ]]></script>
  <style>
  
  .room {
    fill: #ccc;
    stroke: #999;
    stroke-width: 2;
  }
  .room:hover {
    fill:  #c00;
    stroke: #d00;
  }
  
  </style>
  <g transform="translate(200 60)">
    <g transform="matrix(1 0 0 0.5773 0 -0.8165)">
      <g transform="matrix(0.707 0.707 -0.707 0.707 0 0)">
        <rect class="room" x="-50" y="-50" width="50" height="20" />
        <path class="room" d="M50 -50 l60 0 0 140 -140 0 0 -60 80 0z" />
        <rect class="room" x="120" y="-50" width="100" height="140" />
      </g>
    </g>
  </g>   
  <script type="text/javascript">GrowthMul( document.getElementsByTagName( 'rect' ) );</script>
</svg>

Das mit dem Auffüllen, ist allerdings nicht drin. An der Stelle würde ich dir aber raten, pro Fläche an jeder Seite ein weiteres Rechteck zu erstellen und es genau gleich zu animieren, sodass es eben den Eindruck erweckt, dass ein ein Körper ist, obwohl der "Körper" nur aus drei Flächen besteht.

Evtl. ist ja alles aber mit einem <polygon> einfacher?! Musst du mal ausprobieren.