SVG 多边形的 CSS 鼠标悬停

Posted 2023-02-23

【中文标题】SVG 多边形的 CSS 鼠标悬停

【英文标题】：CSS mouseover for SVG polygons

【发布时间】：2013-04-07 11:05:38

【问题描述】：

我正在尝试使用 css 将鼠标悬停规则分配给 svg 多边形，但我无法让它工作。

这是我的 svg：

<?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"
   
   
   id="svg2"
   version="1.1"
   inkscape:version="0.48.4 r9939"
   sodipodi:docname="Nuovo documento 1">
  <defs id="defs4" >
      <link href="style.css" type="text/css" rel="stylesheet" 
      xmlns="http://www.w3.org/1999/xhtml"/>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="335.6875"
     inkscape:cy="177.67353"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:window-
     inkscape:window-
     inkscape:window-x="100"
     inkscape:window-y="100"
     inkscape:window-maximized="0" />
  <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></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Livello 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(-39.3125,-348.5625)">
    <path
       style="fill:#000000;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 65.714286,509.50504 214.285714,-160 8.57143,91.42857 -57.14286,8.57143 0,80 L 160,520.93361 125.71429,595.21933 40,583.79075 z"
       id="path2985"
       inkscape:connector-curvature="0" />
  </g>
</svg>

这是 style.css：

#path2985:hover
    display:none;

在我的 html 页面中，我看到了我的 svg，但在鼠标悬停时它并没有消失。

如果我在谷歌浏览器上打开“检查元素”选项卡并将:hover 属性分配给#path2985，它就会消失，所以我确定样式表正在加载。

为什么鼠标悬停时多边形没有消失？

【问题讨论】：

Display: none; 也隐藏了元素的 DOM-ocupation。您可能想尝试opacity（visibility 不太支持）以实际让鼠标悬停匹配某些东西。如果您不想填满整个空间，您可能希望将其设为较小的 height，直到它悬停，然后在再次可见时再次将其设为完整的 height 。

@Allendar 和 opacity 可以正常工作，我也尝试过 fill 但它不工作，你知道为什么吗？

我不确定；也许有一个名为filled-opacity 的属性（就像stroke-opacity）？或者，如果 RGBa 是可能的，使用它:) (fill: rgba(255,255,255,0.0);)

@Harlandraka fill 不起作用，因为它是在元素样式本身中设置的，级联规则将覆盖来自 styles.css 的任何设置。您可以尝试fill: red !important!; 或将所有样式移动到您的 CSS 文件中。

@Allendar 不，我说的是只是改变它的颜色，即fill:blue; 它不起作用......

【参考方案1】：

删除display: hidden;。使用fill-opacity 隐藏信息，直到您悬停，就像这样；

<path
       style="fill:#000000;fill-opacity: 0.0;fillstroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 65.714286,509.50504 214.285714,-160 8.57143,91.42857 -57.14286,8.57143 0,80 L 160,520.93361 125.71429,595.21933 40,583.79075 z"
       id="path2985"
       inkscape:connector-curvature="0" />

其余详细信息在原始问题的评论部分。