2016-04-24 14 views
0

svg私はをhoverにハイライトしています。ここにここに私のsvg私のSVGパスに境界線を追加できないのはなぜですか?

<svg version="1.1" x="0px" y="0px" viewBox="0 0 2986 886" enable-background="new 0 0 2986 886"> 
    <image display="block" overflow="visible" width="2986" height="886" xlink:href="/A-1.jpg"> 
    </image> 
    <path fill="none" stroke="#000000" strokeWidth="0.25" stroke-miterlimit="10" points="2781.5,905 2986,905 2986,865.6 
    2842.7,634.6 2635.2,601.1 " id="1"></path> 
    .... 
</svg> 

は私cssです:

svg path{ 
    fill:none; 
    pointer-events:all; 
} 

svg path:hover { 
    fill: rgba(73,143,226,0.80); 
    border: 5px solid #31C6FF; 
} 

svg rect:hover { 
    fill: rgba(73,143,226,0.80); 
    border: 5px solid #31C6FF; 
} 

svg polygon:hover { 
    fill: rgba(73,143,226,0.80); 
    border: 5px solid #31C6FF; 
} 

I hover、適切な色への私のpathの変更が、私はborderを取得しないとき。私は何を誤解していますか?

答えて

1

SVGの場合、borderの代わりにstrokeプロパティを使用します。

編集:質問の所有者がコメントで指摘したように、strokestroke-widthと同様にstroke-opacity: 1が必要でした。

+0

私はそれを 'stroke'に変更し、' stroke-width:5px'を追加しましたが、何も起こりませんでした。 – jhamm

+1

私はそれを 'stroke'に変更し、' stroke-width'と 'stroke-opacity:1'を追加しました。 – jhamm

+0

'stroke-opacity'の部分を忘れました。よくできました! –

関連する問題