我用 inkscape 生成了这个图像,我需要的是在悬停时更改每个元素的背景颜色并在单击时添加/删除类...有没有人通过使用 JS/Jquery 完成此操作或者有一些建议使其发挥作用?
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="216.14172"
height="216.14172"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="cuadrado.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.15"
inkscape:cx="350"
inkscape:cy="142.29259"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1278"
inkscape:window-height="768"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
width="1052.36px"
units="cm"
showguides="true"
inkscape:guide-bbox="true" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Capa 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-836.22106)">
<rect
style="fill:none;stroke:#000000;stroke-width:0.74252009;stroke-opacity:1"
id="center"
width="105.19868"
height="105.27945"
x="55.705582"
y="891.74548" />
<path
style="fill:none;stroke:#000000;stroke-width:0.74252009;stroke-opacity:1"
d="m 55.705578,996.86712 105.198682,0 52.9246,53.28568 -211.693293,0 z"
id="rect3319-7-9"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
style="fill:none;stroke:#000000;stroke-width:0.74252009;stroke-opacity:1"
d="m 213.99147,838.78016 -0.64542,210.56404 -51.95391,-52.31936 0,-105.27946 z"
id="rect3319-7-0"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
style="fill:none;stroke:#000000;stroke-width:0.74252009;stroke-opacity:1"
d="m 55.540408,892.31605 0,105.27947 L 2.94107,1050.5608 3.586495,838.70491 z"
id="rect3319-7-0-3"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
onmouseout="evt.target.setAttribute('fill','none)"
onmouseover="evt.target.setAttribute('fill','yellow')"
inkscape:label="#rect3319-7"
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
id="path4286"
d="m 3.4264127,839.33911 210.4024473,0 -52.9246,52.63972 -105.198674,0 z"
style="fill:none;stroke:#000000;stroke-width:0.74252009;stroke-opacity:1" />
</g>
</svg>
编辑
到目前为止,我已经尝试更改外部 CSS 中悬停事件的样式,例如:
#center.hover{background-color:#F0F0F0}
当然是添加CSS声明之后
<defs id="defs4" >
<link href="style.css" type="text/css" rel="stylesheet"
xmlns="http://www.w3.org/1999/xhtml"/>
</defs>
但不起作用,尝试了 jquery.svg 但不起作用,图像在浏览器上看起来很简单,事件似乎被忽略,这是我第一次使用 SVG。
最佳答案
您可以在 SVG 元素上使用伪元素 :hover
:
#path4286:hover {
fill:yellow;
}
但是您必须从标记中删除内联样式,因为它们优先于样式表中应用的样式(除非您不关心始终使用“!important”)。
您可以使用 DOM 从树中删除元素(从父节点调用 removeChild
),但您也可以使用 CSS display:none
获得相同的视觉效果:如下:
var path4286 = document.getElementById("path4286");
path4286.addEventListener("click", function() {
path4286.style.display = 'none';
});
参见:JSFiddle
关于javascript - 使用 CSS 和 JS 设置 SVG 样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23068342/