Visuprojekt (Beispiel)

[Simone]

ok, vielleicht bekomme ich das mit der Skalierung noch hin, laut Internet gibts da Möglichkeiten.

[gaert]

Dieses SVG ist vom Export des CAD-Programms geprägt - sprich: Viel zu kompliziert aufgebaut Von Hand wäre es wesentlich einfacher und übersichtlicher, schließlich sind es nur ein paar Linien und Polygone. Auch die Skalierbarkeit ist ganz einfach zu erreichen, im SVG darf einfach kein Viewport angegeben sein.

[Simone]

das hat schon viel schlimmer ausgesehen, ich habe schon einiges gelöscht

Danke für den Hinweis, dann werden wir das doch irgendwie hinbekommen Viewbox habe ich eigentlich auch schon alles entfernt, aber wenn ich das richtig verstehe muß ich noch was mit transform scale einbauen.

[gaert]

Aus'm Kopf weiss ich's leider nicht genau - aber es ist irgendwie möglich quasi 100% anzugeben, so dass das SVG vom <img>-Tag (HTML) skaliert wird.

[panzaeron]

Wenn das SVG 100% Breite und Höhe ein nehmen soll, muss preserveAspectRatio auf none stehen so wie hier beschrieben.

[wintermute]

Dieses SVG ist vom Export des CAD-Programms geprägt - sprich: Viel zu kompliziert aufgebaut Von Hand wäre es wesentlich einfacher und übersichtlicher, schließlich sind es nur ein paar Linien und Polygone. Auch die Skalierbarkeit ist ganz einfach zu erreichen, im SVG darf einfach kein Viewport angegeben sein.

Mein Ursprungs-SVG hatte ich ja im Texteditor "gemalt" - das ist noch unverwurstelt. Da noch ein paar Linien zuzuschreiben ist ja auch keine Sache, ich hab nur beim transformen und der Skalierung dann schlussendlich die Nerven verloren...

[Simone]

wenn du die Nerven verloren hast bin ich mir nicht mehr so sicher ob ich das hinbekomme

In deinem Ursprungs-SVG fehlen halt die Koordinaten, muß ja irgendwie passen, die stehen vermutlich im LBS sonst wüsste der ja auch nicht wann es unbehaglich ist

schau mr mal

[wintermute]

Wieso fehlen da Koordinaten? Die stehen da doch drin:

<polygon points="19.3 20 25.3 17 26.7 31.8 24.5 60 20.5 81.8 17 87.3 16 76.4 17.1 38.8" fill="yellow" />
<polygon points="17.6 73.3 22 67 24.2 33.3 18.9 39.4" fill="green" />

Oder meinst Du andere Koordinaten?

[Simone]

Ja die anderen! meine ersten Versuche waren ja mit deinem aber die Linien passen nicht, die müssen noch irgendwoher eine Information bekommen wo die anfangen.

ich wollte es schon von den anderen SVGs ableiten, aber bis jetzt noch nicht geschafft. Ich werde es nochmal probieren.

[wintermute]

Versteh ich nicht...

<rect x=12 y=0 width=16 height=100 />

zB zeichnet ein Rechteck das bei 12°/0% anfaengt und bei 28°/100% aufhoert... entsprechend zeichnet

<line x1=12 y1=30 x2=28 y2=30 />

eine Linie, die bei 12°/30% anfaengt und bei 28°/100% aufhoert.

Das einzige Problem ist, dass das SVG eben nicht bei 12/0, sondern bei 0/0 anfaengt. Ich habe versucht, dass ueber den viewport zu machen, aber wie gesagt war mir das dann alles zu stressig. Und die Koordinaten "umzurechnen" (also zB bei x jeweils 12 abzuziehen) war mir zu amateurhaft

[Simone]

Hier der erweiterte Code von Michael

@stonie2oo4 willst du das mit dem Zoom nochmal testen? Ich habe es im Chrome (ohne Edomi) mit Zoom vergrössert/verkleinert. So wie es aussieht sind immer noch unscharfe Linien dabei zb. bei 33%. Auf dem Ipad finde ich es ok

@panzaeron danke das habe ich eingebaut


Unbenannt.PNG

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:ev="http://www.w3.org/2001/xml-events"
     width="400" height="400"
     viewBox="0 -1000 1000 1000" preserveAspectRatio="none"
    version="1.1" baseProfile="full">
    <title>Behaglichkeitsdiagramm</title>
    <desc>Behaglichkeitsdiagramm nach Frank</desc>   
<!--vergrössert das Feld und ?-->
        <g transform="matrix(50 0 0 -10 -600 0)">
<!--Feld noch Behaglich-->
 <polygon fill="#d6d6d6" points="19.3 20 25.3 17 26.7 31.8 24.5 60 20.5 81.8 17 87.3 16 76.4 17.1 38.8" />
 <!--Feld Behaglich-->
 <polygon fill="#a6a6a6" points="17.6 73.3 22 67 24.2 33.3 18.9 39.4" />
  </g>
 <!--Linien vertikal-->
<rect id="white_stripe" width="1350" height="2" y="-100" x="-100" fill="#FFFFFF"/>
<rect id="white_stripe" width="1350" height="2" y="-200" x="-100" fill="#FFFFFF"/>
<rect id="white_stripe" width="1350" height="2" y="-300" x="-100" fill="#FFFFFF"/>
<rect id="white_stripe" width="1350" height="2" y="-400" x="-100" fill="#FFFFFF"/>
<rect id="white_stripe" width="1350" height="2" y="-500" x="-100" fill="#FFFFFF"/>
<rect id="white_stripe" width="1350" height="2" y="-600" x="-100" fill="#FFFFFF"/>
<rect id="white_stripe" width="1350" height="2" y="-700" x="-100" fill="#FFFFFF"/>
<rect id="white_stripe" width="1350" height="2" y="-800" x="-100" fill="#FFFFFF"/>
<rect id="white_stripe" width="1350" height="2" y="-900" x="-100" fill="#FFFFFF"/>
<!--Linien horizontal-->
<rect id="white_stripe" width="2" height="1350" y="-1000" x="100" fill="#FFFFFF"/>
<rect id="white_stripe" width="2" height="1350" y="-1000" x="200" fill="#FFFFFF"/>
<rect id="white_stripe" width="2" height="1350" y="-1000" x="300" fill="#FFFFFF"/>
<rect id="white_stripe" width="2" height="1350" y="-1000" x="400" fill="#FFFFFF"/>
<rect id="white_stripe" width="2" height="1350" y="-1000" x="500" fill="#FFFFFF"/>
<rect id="white_stripe" width="2" height="1350" y="-1000" x="600" fill="#FFFFFF"/>
<rect id="white_stripe" width="2" height="1350" y="-1000" x="700" fill="#FFFFFF"/>
<rect id="white_stripe" width="2" height="1350" y="-1000" x="800" fill="#FFFFFF"/>
<rect id="white_stripe" width="2" height="1350" y="-1000" x="900" fill="#FFFFFF"/>
<rect id="white_stripe" width="2" height="1350" y="-1000" x="1000" fill="#FFFFFF"/>

</svg>

[gaert]

Mit Photoshop wäre das Thema wohl schon lange erledigt... Baaaaah... Pixelbilder...

[Simone]

Und das skaliert besser?kann ich auch noch versuchen was ist da eine geeignete groesse 400x400px?

[gaert]

Ich verwende zwar nur wenige Bilder, aber die haben i.d.R. die doppelte Auflösung (für's iPad). Wenn das Bild also z.B. mit 400x400px dargestellt werden soll, halte ich das Bild mit 800x800px vor damit es auf Retina-Displays knackig scharf ist.

Die modernen Browser skalieren die Bilder sehr akkurat - nicht wie früher per Pixelwiederholung, sondern algorithmisch ausgefuchst

[stonie2oo4]

@stonie2oo4 willst du das mit dem Zoom nochmal testen?

Ja möchte ich . Aber aus irgend einem Grund will es nicht so wie ich will.
Wenn ich das Bild in Edomi einfügen will, bleibt die Ansicht leer.
Hat es schonmal jemand anderes probiert? Dann wüsst ich wenigstens obs an mir liegt