Hallo, ich habe (bin Anfänger) zwei Probleme und ein Problemchen mit meinem Code.
mit dem unten eingefügtem Code erzeuge ich 6 Dreiecke welche verlinkt sind und mouseover-Eigenschaften (bzw. Transformationen) bekommen. Ich füge nur den COde für drei Dreiecke ein, da mein Text für das Forum sonst zu lang wird. Die anderen drei Dreiecke liegen genau darunter. Die Probleme sind aber auch so erkennbar.
Problem 1)
Die SVG Container sind rechteckig. Durch das zusammenlegen überlagern die im Code zuletzt definierten SVG Elemente die vorherigen Elemente. Dadurch wird auch der klickbare Bereich überlagert. Aber es soll ja weiterhin das komplette Dreieck klickbar sein. Wie kann ich das lösen?
Problem 2)
Das mouseover sorgt für eine Veränderung der Transparenz (opacity). Leider aber nur wenn ich das Dreicek anklicke. Sobald ich auf dem Text komme, wird der mousout Effekt fällig. Ich möchte aber gern dass, wenn ich den Text berühre, das mouseover-Event des jeweiligen Dreieckes immer noch aktiv bleibt. Wie kann ich das bewerkstelligen?
Problemchen 3)
Der Code ist ellenlang und es sollte doch eigentlich eine verschachtelung möglich sein oder? Das hab ich vershiedentlich versucht, aber ich bekomme das nicht hin.
Hier das zugehörige css
Besten Dank und Grüße, Falk
mit dem unten eingefügtem Code erzeuge ich 6 Dreiecke welche verlinkt sind und mouseover-Eigenschaften (bzw. Transformationen) bekommen. Ich füge nur den COde für drei Dreiecke ein, da mein Text für das Forum sonst zu lang wird. Die anderen drei Dreiecke liegen genau darunter. Die Probleme sind aber auch so erkennbar.
Problem 1)
Die SVG Container sind rechteckig. Durch das zusammenlegen überlagern die im Code zuletzt definierten SVG Elemente die vorherigen Elemente. Dadurch wird auch der klickbare Bereich überlagert. Aber es soll ja weiterhin das komplette Dreieck klickbar sein. Wie kann ich das lösen?
Problem 2)
Das mouseover sorgt für eine Veränderung der Transparenz (opacity). Leider aber nur wenn ich das Dreicek anklicke. Sobald ich auf dem Text komme, wird der mousout Effekt fällig. Ich möchte aber gern dass, wenn ich den Text berühre, das mouseover-Event des jeweiligen Dreieckes immer noch aktiv bleibt. Wie kann ich das bewerkstelligen?
Problemchen 3)
Der Code ist ellenlang und es sollte doch eigentlich eine verschachtelung möglich sein oder? Das hab ich vershiedentlich versucht, aber ich bekomme das nicht hin.
HTML Code:
<body> <div id="container"> <div id="header"><h1>DE | EN</h1></div> <div id="dreieck_menu"> <div id="dreieck_tl"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle" height="105" width="120"> <defs> <clipPath id="triangle-1"> <polygon points="0,105 60,0 120,105" stroke="none" /> </clipPath> <linearGradient id="verlauf-1" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="yellow" /> <stop offset="100%" stop-color="red" /> </linearGradient> </defs> <a xlink:href="#" clip-path="url(#triangle-1)" " stroke="none"> <g class="hovergroup"> <rect height="105" width="120" fill=url(#verlauf-1) stroke="blue" style="opacity:0.5;" clip-path="url(#triangle-1)" > <animateTransform xlink:href="#triangle-1" type="rotate" attributeName="transform" begin="0s" dur="2s" from="0 0 50" to="360 0 50" repeatCount="1" /> <animate attributeName="stroke-width" begin="mouseover" dur="1" from="0" to="4" fill="freeze" /> <animate attributeName="stroke-width" begin="mouseout" dur="1" from="4" to="0" fill="freeze" /> <animate attributeName="opacity" begin="mouseout" dur="1" from="1" to="0.5" fill="freeze" /> <animate attributeName="opacity" begin="mouseover" dur="1" from="0.5" to="1" fill="freeze" /> </rect> <text x="50%" y="80%" text-anchor="middle" style="font-family: Arial; font-size: 14px; fill: #FFF;"> Why </text> <text x="50%" y="95%" text-anchor="middle" style="font-family: Arial; font-size: 14px; fill: #FFF;"> Global Change </text> </g> </a> </svg> </div> <div id="dreieck_tm"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle" height="105" width="120"> <defs> <clipPath id="triangle-2"> <polygon points="0,0 60,105 120,0" stroke="none" /> </clipPath> <linearGradient id="verlauf-2" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="black" /> <stop offset="100%" stop-color="white" /> </linearGradient> </defs> <a xlink:href="#" clip-path="url(#triangle-2)" " stroke="none"> <g class="hovergroup"> <rect height="105" width="120" fill=url(#verlauf-2) style="opacity:0.5;" clip-path="url(#triangle-2)"> <animateTransform xlink:href="#triangle-2" type="rotate" attributeName="transform" begin="0s" dur="2s" from="0 0 50" to="360 0 50" repeatCount="1" /> <animate attributeName="stroke-width" begin="mouseover" dur="1" from="0" to="4" fill="freeze" /> <animate attributeName="stroke-width" begin="mouseout" dur="1" from="4" to="0" fill="freeze" /> <animate attributeName="opacity" begin="mouseout" dur="1" from="1" to="0.5" fill="freeze" /> <animate attributeName="opacity" begin="mouseover" dur="1" from="0.5" to="1" fill="freeze" /> </rect> <text x="50%" y="15%" text-anchor="middle" style="font-family: Arial; font-size: 14px; fill: #FFF;"> Eine Alternative </text> <text x="50%" y="35%" text-anchor="middle" style="font-family: Arial; font-size: 14px; fill: #FFF;"> Welt </text> </g> </a> </svg> </div> <div id="dreieck_tr"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle" height="105" width="120"> <defs> <clipPath id="triangle-3"> <polygon points="0,105 60,0 120,105" stroke="none" /> </clipPath> <linearGradient id="verlauf-3" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="black" /> <stop offset="100%" stop-color="white" /> </linearGradient> </defs> <a xlink:href="#" clip-path="url(#triangle-3)" " stroke="none"> <g class="hovergroup"> <rect height="105" width="120" fill=url(#verlauf-3) style="opacity:0.5;" clip-path="url(#triangle-3)"> <animateTransform xlink:href="#triangle-3" type="rotate" attributeName="transform" begin="0s" dur="2s" from="0 0 50" to="360 0 50" repeatCount="1" /> <animate attributeName="stroke-width" begin="mouseover" dur="1" from="0" to="4" fill="freeze" /> <animate attributeName="stroke-width" begin="mouseout" dur="1" from="4" to="0" fill="freeze" /> <animate attributeName="opacity" begin="mouseout" dur="1" from="1" to="0.5" fill="freeze" /> <animate attributeName="opacity" begin="mouseover" dur="1" from="0.5" to="1" fill="freeze" /> </rect> <text x="50%" y="80%" text-anchor="middle" style="font-family: Arial; font-size: 14px; fill: #FFF;"> Unsere </text> <text x="50%" y="95%" text-anchor="middle" style="font-family: Arial; font-size: 14px; fill: #FFF;"> Philosopie </text> </g> </a> </svg> </div> </div> </div> </div> </body>
Code:
#dreieck_menu{ height:210px; width:240px; position:absolute; left:82px; top:50px; } #dreieck_tl{ position:absolute; left: 0px; top: 0px; pointer-event:all; } #dreieck_tm{ position:absolute; left: 60px; top: 0px; } #dreieck_tr{ position:absolute; left: 120px; top: 0px; } #dreieck_bl{ position:absolute; left: 0px; top: 105px; } #dreieck_bm{ position:absolute; left: 60px; top: 105px; } #dreieck_br{ position:absolute; left: 120px; top: 105px; }