使用 CSS 和 JS 设计 SVG

Question

我用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。

Answer 1

您可以在 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

Answer 2

就使用 CSS 进行样式设置而言，您只需为每个部分指定一个类，然后对其进行定位即可。

svg 示例

<polygon class="one" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="62.705,8.607 4.918,118.033 139.754,115.574 "/>

CSS

.one {
    fill: #ff0000;
}

这里是a fiddle:

不过，在点击时添加类很棘手，因为 SVG 有自己的 DOM - 这是一篇似乎涵盖了细节的文章。

http://toddmotto.com/hacking-svg-traversing-with-ease-addclass-removeclass-toggleclass-functions/

祝你好运！