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