SVG路徑區域重疊

我剛剛開始使用SVG，我無法弄清楚如何在沒有懸停區域重疊問題的情況下懸停在非矩形形狀上，如my fiddle所示。SVG路徑區域重疊

如果有人能指出我缺少的知識，我會非常感激。

<svg height="444" width="257" class="svg svg1"> 
    <path d="M0 148 L257 0 L257 297 L0 444 Z" style="fill:lime;stroke:none;" 
     onmouseover="document.getElementById('fade1').style.opacity = '.9';" 
     onmouseout="document.getElementById('fade1').style.opacity = '0';"/> 
</svg> 
<svg height="444" width="257" class="svg svg2"> 
    <path d="M0 148 L257 0 L257 297 L0 444 Z" style="fill:lime;stroke:none;" 
     onmouseover="document.getElementById('fade2').style.opacity = '.9';" 
     onmouseout="document.getElementById('fade2').style.opacity = '0';"/> 
</svg> 
<svg height="444" width="257" class="svg svg3"> 
    <path d="M0 148 L257 0 L257 297 L0 444 Z" style="fill:lime;stroke:none;" 
     onmouseover="document.getElementById('fade3').style.opacity = '.9';" 
     onmouseout="document.getElementById('fade3').style.opacity = '0';"/> 
</svg>

來源

2014-03-03 user3372093

您必須將所有路徑放在同一個SVG中才能使懸停效果按照您的要求工作。這是由於SVG元素（而不是路徑）彼此重疊，這與Z索引不起作用，就像你想要的那樣

說了這麼多，你不能很容易地定位<path> s我用this tool來應用你的風格。或者你可以把他們在個人<g>元素和他們的方式

另外要注意的是，你應該應用:hover效果的路徑定位，而不是SVG元素

/* SVG */ 
<svg height="1150" width="257"> 
    <path d="M0 244L257 96L257 393L0 540z" style="fill:lime;stroke:none;"/> 
    <path d="M0 545L257 397L257 694L0 841z" style="fill:lime;stroke:none;"/> 
    <path d="M0 846L257 698L257 995L0 1142z" style="fill:lime;stroke:none;"/> 
</svg> 

/* CSS */ 
svg { 
    margin:0 auto; 
    display:block; 
    width:257px; 
} 
svg path { 
    opacity:.3; 
} 
svg path:hover { 
    opacity:1; 
}

Demo

PS我假設javascripg onmouseover s和onmouseout都來自失敗的嘗試？

來源

2014-03-03 04:27:19

嗯，當我懸停在相應的路徑上時，我使用onmouseover和onmouseouts來更改圖像的不透明度。我會嘗試你告訴我的，告訴你它是如何實現的。非常感謝。 – user3372093

@ user3372093如果您發現一個問題令您的問題滿意，您可以點擊問題旁邊的複選標記將其標記爲正確，然後問題將同時提供答案和OP（原始海報 - 您）聲望這樣做 –

Yey !!有效。如果您願意，可以查看結果。 http://wolfsbrain.com/welcome.html – user3372093

SVG路徑區域重疊

回答

相關問題