0

I'm trying to assign mouseover rules to an svg polygon with css but i can't get it to work.

This is my 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"
   width="249.8125"
   height="247.1875"
   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-width="518"
     inkscape:window-height="423"
     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>

This is style.css:

#path2985:hover{
    display:none;
}

In my html page, i see my svg but on mouse over it doesn't disappear.

If i open the "inspect element" tab on google chrome and i assign the :hover property to #path2985 it disappears, so i'm sure that the stylesheet is being loaded.

Why isn't the polygon disappearing on mouse over?

Improve this question
9
  • Display: none; hides the DOM-ocupation of the element too. You might want to try opacity (visibility isn't supported that well) to actually let the mouse hover match something. If you don't want the whole space to be filled, you might want to make it a small height until it's hovered and then make it the full height again when it becomes visible again.
    – user1467267
    Commented Apr 15, 2013 at 10:57
  • @Allendar with opacity it works, i also tried with fill but it's not working, do you know why?
    – BackSlash
    Commented Apr 15, 2013 at 10:59
  • I'm not sure; maybe there is an attribute called filled-opacity (just like stroke-opacity)? Or, if RGBa is possible, use that :) (fill: rgba(255,255,255,0.0);)
    – user1467267
    Commented Apr 15, 2013 at 11:00
  • @Harlandraka fill does not work, because it is set in the element style itself, which by the cascading rules will overwrite any settings from the styles.css. You could try fill: red !important!; or move all styles to your CSS file.
    – Sirko
    Commented Apr 15, 2013 at 11:01
  • @Allendar No, i'm talking about just changing it's color, with i.e. fill:blue; it doesn't work...
    – BackSlash
    Commented Apr 15, 2013 at 11:02

1 Answer 1

Reset to default
1

Remove display: hidden;. Use fill-opacity to hide the info until you hover, like so;

<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" />

The rest of the details are in the comment section of the original question.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.