[英]How do I use javascript onmouseover function with svg to get classname?
[英]How do I use the onmouseover function to highlight a portion of an SVG image?
我有一張歐洲地圖的SVG圖片,每個國家的分區都用路徑表示。 如果將鼠標懸停在某個國家/地區上,我希望將懸停的國家/地區的不透明度更改為0.5。 我嘗試定義要調用的JavaScript函數,但是當我將鼠標懸停在某個國家時,似乎什么也沒發生。 這是我的SVG代碼供參考,以及我嘗試編寫的JavaScript:
<script
xlink:href="../map.js"
id="script99"
type="text/javascript" />
<g
inkscape:groupmode="layer"
id="layer2"
class="section"
inkscape:label="paths"
transform="translate(0,-230.143)">
<path
style="fill:#3399ff;stroke:#000000;stroke-width:0.06832593px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
d="m 170.10418,253.29039 0.16365,-1.29169 2.4003,-0.68196 2.91852,-0.51346 0.90921,0.17651 0.12727,0.61776 -0.50914,0.82636 -0.14547,1.3639 -1.51836,1.04298 -0.82736,0.85845 c 0,0 -0.28187,0.48137 -0.33642,0.48939 -0.0545,0.007 -0.99103,-0.7381 -0.99103,-0.7381 l -0.66371,-0.43325 -0.60915,-1.37191 z"
id="ukraine"
onclick="Here(id)"
onmouseover="MouseOver(this)"
inkscape:connector-curvature="0"
/>
function MouseOver(elem){
elem.opacity = 0.1;
}
我刪除了內聯樣式,並將它們放入<style>
標記中。 您可能會看到<style>
標簽位於svg元素內。
為您添加的樣式
#ukraine:hover {
fill-opacity: 0.5;
}
這是演示:
<svg viewBox="170 250 7 7"> <style type="text/css"> <![CDATA[ #ukraine { fill: #3399ff; fill-opacity: 1; stroke: #000000; stroke-width: 0.06832593px; stroke-linecap: butt; stroke-linejoin: miter; stroke-opacity: 1; } #ukraine:hover { fill-opacity: 0.5; } ]]> </style> <path id="ukraine" d="m 170.10418,253.29039 0.16365,-1.29169 2.4003,-0.68196 2.91852,-0.51346 0.90921,0.17651 0.12727,0.61776 -0.50914,0.82636 -0.14547,1.3639 -1.51836,1.04298 -0.82736,0.85845 c 0,0 -0.28187,0.48137 -0.33642,0.48939 -0.0545,0.007 -0.99103,-0.7381 -0.99103,-0.7381 l -0.66371,-0.43325 -0.60915,-1.37191 z" /> </svg>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.