2016-06-10 5 views
1

Ist es möglich, in diesem BeispielSVG schweben nicht nur Wege, sondern alle viewBox

#p1:hover { 
 
    opacity: 0.2 
 
} 
 
#p1 { 
 
    fill:none; 
 
    stroke:black; 
 
    pointer-events:all; 
 
}
<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 48.086 48.09"> 
 
    <path id="p1" d="M1.006 48.088c-.256 0-.498-.103-.68-.288-.217-.207-.324-.45-.324-.71L0 33.213c0-.523.426-.95.95-.95s.95.427.95.95l.003 11.62L18.905 27.84c.18-.18.418-.278.672-.278.254 0 .493.1.672.28.37.368.37.972 0 1.342L3.236 46.188h11.64c.523 0 .95.428.95.95s-.426.95-.95.95H1.007zM28.51 20.535c-.253 0-.492-.1-.67-.28-.37-.37-.37-.972 0-1.342L44.85 1.906H33.21c-.525 0-.95-.426-.95-.95s.425-.95.95-.95h13.87c.256 0 .498.103.68.29.217.208.324.45.324.71l.002 13.873c0 .523-.426.95-.95.95s-.95-.426-.95-.95l-.002-11.62-17 16.997c-.18.18-.42.278-.673.278zM19.58 20.525c-.253 0-.492-.1-.67-.28L1.9 3.236 1.9 14.876c0 .525-.426.95-.95.95S0 15.4 0 14.876l.002-13.87c0-.257.104-.5.29-.68C.5.107.743 0 1.003 0L14.876 0c.524 0 .95.426.95.95s-.426.95-.95.95l-11.62.002 16.997 17c.37.372.37.975 0 1.345-.18.18-.42.278-.672.278zM33.21 48.086c-.524 0-.95-.427-.95-.95 0-.254.098-.492.277-.672.18-.18.418-.277.672-.278l11.62-.003L27.833 29.18c-.37-.37-.37-.973 0-1.343.18-.18.418-.278.67-.278.255 0 .494.098.673.277L46.183 44.85V33.207c0-.523.426-.95.95-.95s.95.427.95.95v13.87c0 .26-.105.5-.293.683-.207.216-.45.322-.71.322l-13.87.004z"/> 
 
</svg>

Hover-Aktion zu initiieren, nicht nur, wenn die Maus über die Pfade, aber wenn es in der Regel über das Symbol auch zwischen die Wege? Es ist sehr wichtig, dass ich kein zusätzliches Markup hinzufüge. Der HTML-Abschnitt muss so bleiben wie er ist.

Antwort

3

Ihre :hover zum SVG (#icon) Element bewegen, wie würden Sie, wenn mit einem anderen HTML-Struktur arbeiten:

#icon:hover #p1 { 
 
    opacity: 0.2 
 
} 
 
#p1 { 
 
    fill:none; 
 
    stroke:black; 
 
    pointer-events:all; 
 
}
<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 48.086 48.09"> 
 
    <path id="p1" d="M1.006 48.088c-.256 0-.498-.103-.68-.288-.217-.207-.324-.45-.324-.71L0 33.213c0-.523.426-.95.95-.95s.95.427.95.95l.003 11.62L18.905 27.84c.18-.18.418-.278.672-.278.254 0 .493.1.672.28.37.368.37.972 0 1.342L3.236 46.188h11.64c.523 0 .95.428.95.95s-.426.95-.95.95H1.007zM28.51 20.535c-.253 0-.492-.1-.67-.28-.37-.37-.37-.972 0-1.342L44.85 1.906H33.21c-.525 0-.95-.426-.95-.95s.425-.95.95-.95h13.87c.256 0 .498.103.68.29.217.208.324.45.324.71l.002 13.873c0 .523-.426.95-.95.95s-.95-.426-.95-.95l-.002-11.62-17 16.997c-.18.18-.42.278-.673.278zM19.58 20.525c-.253 0-.492-.1-.67-.28L1.9 3.236 1.9 14.876c0 .525-.426.95-.95.95S0 15.4 0 14.876l.002-13.87c0-.257.104-.5.29-.68C.5.107.743 0 1.003 0L14.876 0c.524 0 .95.426.95.95s-.426.95-.95.95l-11.62.002 16.997 17c.37.372.37.975 0 1.345-.18.18-.42.278-.672.278zM33.21 48.086c-.524 0-.95-.427-.95-.95 0-.254.098-.492.277-.672.18-.18.418-.277.672-.278l11.62-.003L27.833 29.18c-.37-.37-.37-.973 0-1.343.18-.18.418-.278.67-.278.255 0 .494.098.673.277L46.183 44.85V33.207c0-.523.426-.95.95-.95s.95.427.95.95v13.87c0 .26-.105.5-.293.683-.207.216-.45.322-.71.322l-13.87.004z"/> 
 
</svg>

Da Sie das ganze Element zu bewirken, die #p Selektor nicht benötigt, so dass Sie ein wenig weiter vereinfachen könnten:

#icon:hover { 
 
    opacity: 0.2 
 
} 
 
#p1 { 
 
    fill:none; 
 
    stroke:black; 
 
    pointer-events:all; 
 
}
<svg id="icon" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 48.086 48.09"> 
 
    <path id="p1" d="M1.006 48.088c-.256 0-.498-.103-.68-.288-.217-.207-.324-.45-.324-.71L0 33.213c0-.523.426-.95.95-.95s.95.427.95.95l.003 11.62L18.905 27.84c.18-.18.418-.278.672-.278.254 0 .493.1.672.28.37.368.37.972 0 1.342L3.236 46.188h11.64c.523 0 .95.428.95.95s-.426.95-.95.95H1.007zM28.51 20.535c-.253 0-.492-.1-.67-.28-.37-.37-.37-.972 0-1.342L44.85 1.906H33.21c-.525 0-.95-.426-.95-.95s.425-.95.95-.95h13.87c.256 0 .498.103.68.29.217.208.324.45.324.71l.002 13.873c0 .523-.426.95-.95.95s-.95-.426-.95-.95l-.002-11.62-17 16.997c-.18.18-.42.278-.673.278zM19.58 20.525c-.253 0-.492-.1-.67-.28L1.9 3.236 1.9 14.876c0 .525-.426.95-.95.95S0 15.4 0 14.876l.002-13.87c0-.257.104-.5.29-.68C.5.107.743 0 1.003 0L14.876 0c.524 0 .95.426.95.95s-.426.95-.95.95l-11.62.002 16.997 17c.37.372.37.975 0 1.345-.18.18-.42.278-.672.278zM33.21 48.086c-.524 0-.95-.427-.95-.95 0-.254.098-.492.277-.672.18-.18.418-.277.672-.278l11.62-.003L27.833 29.18c-.37-.37-.37-.973 0-1.343.18-.18.418-.278.67-.278.255 0 .494.098.673.277L46.183 44.85V33.207c0-.523.426-.95.95-.95s.95.427.95.95v13.87c0 .26-.105.5-.293.683-.207.216-.45.322-.71.322l-13.87.004z"/> 
 
</svg>

+0

Danke für die Antwort ist es einfacher als ich in reinem SVG dachte :) Allerdings habe ich vergessen zu erwähnen, dass ich Snap.svg benutze und dieses Symbol aus der externen Datei laden. Können Sie mir vielleicht sagen, warum es hier nicht funktioniert? [link] (http://przemoo83.esy.es/snap/) – przemoo83

+0

Hmmm, nicht sicher, ehrlich zu sein. Das äußere SVG ('# product-main') scheint zu verhindern, dass es wie erwartet funktioniert. Ich weiß nicht, warum das so wäre. Ich denke, Sie sollten eine weitere Frage öffnen, die das Problem zeigt, da es scheinbar nichts mit Ihrem anfänglichen Problem zu tun hat. – Turnip

+0

Ja, wahrscheinlich hast du recht. Die Antwort, die du hier gegeben hast, ist mir immer noch nützlich. Vielen Dank! – przemoo83

Verwandte Themen