1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

[SVG] Objekt-Größe nicht vom zoomen beeinflusst.

Dieses Thema im Forum "XML Technologien" wurde erstellt von mtun, 22. Juni 2012.

  1. mtun

    mtun Mitglied

    Hi,
    ich würde gerne in ein svg Bild hinein bzw. hinaus zoomen, ohne dass sich die Größe der Objekte ändert, das Bild aber schon!
    als Beispiel:

    Code (XML):
    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    3.  
    4. <svg xmlns="http://www.w3.org/2000/svg"
    5.    xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
    6.    version="1.1" baseProfile="full"
    7.    width="100px" height="100px">"
    8.     <rect fill="#abc" height="100%" width="100%"/>
    9.  
    10.     <circle cx="20" cy="20" r="10" fill="green" stroke="blue"/>
    11.    
    12.     <line x1="5" y1="45" x2="95" y2="5" stroke="black" stroke-width="1"/>
    13.     <line x1="45" y1="5" x2="5" y2="95" stroke="black" stroke-width="1"/>
    14.  
    15. </svg>
    bei circle soll der radius immer gleich bleiben, bei den linien stroke-width, das Gesammtbild (hellblauer Hintergrund) soll sich aber in der größe verändern. Wenn man also sehr weit heraus gezoomt hat, soll man vom blauen Hintergrund nix mehr sehen, sondern nur den grünen Kreis bzw die linien. Hat jemand eine Idee ob/wie das geht? Vielleicht mit onzoom, viewBox oder einfach einen Parameter für circle bzw. line?


    ------EDIT---------

    ich habe mal bei einer line etwas geändert
    Code (XML):
    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    3.  
    4. <svg xmlns="http://www.w3.org/2000/svg"
    5.    xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
    6.    version="1.1" baseProfile="full"
    7.    width="100px" height="100px"
    8.    onscroll="set(evt,1)" id="doc"
    9.    >
    10.     <rect fill="#abc" height="100%" width="100%"/>
    11.  
    12.  
    13.  
    14.     <circle cx="20" cy="20" r="10" fill="green" stroke="blue"/>
    15.  
    16.     <line x1="5" y1="45" x2="95" y2="5" stroke="black" stroke-width="1"/>
    17.     <line id="lin" x1="45" y1="5" x2="5" y2="95" stroke="black" stroke-width="1"/>
    18.  
    19. <defs>
    20. <script type="application/ecmascript">
    21.  
    22. function set(evt,num)
    23. {
    24. var linie = document.getElementById("lin");
    25.  
    26. linie.setAttribute("stroke-width", linie.getAttribute("stroke-width")*0.95);
    27.  
    28. }
    29. </script>
    30.  
    31. </defs>
    32. </svg>
    jetzt wär nur noch der genau Faktor und ob rein oder rausgezoom wurde entscheidend (oder eine alternative Lösung des Problems)
     
    Zuletzt von einem Moderator bearbeitet: 23. Mai 2014
  2. Martin Honnen

    Martin Honnen Mitglied

  3. mtun

    mtun Mitglied

    Hi,
    danke für die Antwort. Aber ich glaube ein extra zoom-Button wär ein bischen overkill. Ich wollte nur den standard zoom mit str+click verwenden

    EDIT: weiß jemand welche variable sich verändert, wenn ich ctrl+click mache, bzw wie der zooming-faktor ist?
     
    Zuletzt bearbeitet: 22. Juni 2012
Die Seite wird geladen...