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

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:

XML:
<?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"
    version="1.1" baseProfile="full"
    width="100px" height="100px">"
    <rect fill="#abc" height="100%" width="100%"/>

    <circle cx="20" cy="20" r="10" fill="green" stroke="blue"/>
    
    <line x1="5" y1="45" x2="95" y2="5" stroke="black" stroke-width="1"/>
    <line x1="45" y1="5" x2="5" y2="95" stroke="black" stroke-width="1"/>

</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
XML:
<?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"
    version="1.1" baseProfile="full"
    width="100px" height="100px"
    onscroll="set(evt,1)" id="doc"
    >
    <rect fill="#abc" height="100%" width="100%"/>



    <circle cx="20" cy="20" r="10" fill="green" stroke="blue"/>

    <line x1="5" y1="45" x2="95" y2="5" stroke="black" stroke-width="1"/>
    <line id="lin" x1="45" y1="5" x2="5" y2="95" stroke="black" stroke-width="1"/>

<defs>
<script type="application/ecmascript">
 
function set(evt,num)
{
var linie = document.getElementById("lin");

linie.setAttribute("stroke-width", linie.getAttribute("stroke-width")*0.95);

} 
</script>
 
</defs>
</svg>
jetzt wär nur noch der genau Faktor und ob rein oder rausgezoom wurde entscheidend (oder eine alternative Lösung des Problems)
 
Zuletzt bearbeitet von einem Moderator:
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:
Zurück