Svg hover rect change color

поэтому у меня есть этот гигантский файл svg, содержащий один крошечный прямоугольник. Я хочу, чтобы этот прямоугольник менял цвет, когда наводил на него курсор. Я не могу использовать onmouseover b/c, который является java, и это для школьного проекта, и нам сказали, что мы можем использовать только html, html5, css и css3. Я пробовал разные вещи, и я не могу понять, почему это не сработает. Я только добавил бит контейнера прямоугольника g. И код стиля, который я использую. Я попытался добавить этот код стиля в заголовок сразу после стартового тега svg thingy, в контейнер g, в сам прямоугольник (без тега стиля в этом случае). Я могу добавить весь файл svg, но эта вещь массивная, поэтому я буду делать это только по запросу.Svg hover rect change color

<g 
    inkscape:groupmode="layer" 
    id="layer12" 
    inkscape:label="Hobitton Stadticon" 
    style="display:inline" 
    sodipodi:insensitive="true" 
    > 
    <style type="text/css"> 
<![CDATA[ 
    .rect10023:hover {fill: #0000FF;}]]> 
    </style> 

     <rect 
     style="fill:#DF0101;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;" 
     id="rect10023" 
     width="8.2568808" 
     height="6.880734" 
     x="266.97247" 
     y="201.43393" 
     /> 
    <text 
     xml:space="preserve" 
     style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans" 
     x="343.72607" 
     y="-32.097607" 
     id="text10025" 
     sodipodi:linespacing="125%" 
     transform="matrix(0.72346735,0.6903586,-0.6903586,0.72346735,0,0)" 
     inkscape:transform-center-x="10.550459" 
     inkscape:transform-center-y="-7.7981651"><tspan 
     sodipodi:role="line" 
     id="tspan10027" 
     x="343.72607" 
     y="-32.097607" 
     style="font-size:14px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Chiller;-inkscape-font-specification:Chiller">Hobbiton</tspan></text> 
    </g>

источник

2014-12-01 Nik Rawlins

Для начала: 1) Прямоугольник имеет id - не класс, поэтому используйте '# rect10023: hover' 2) Вам нужно будет либо удалить заливку прямоугольника из встроенного стиля, либо вы будете нужно использовать fill: '# 0000FF! important;' в вашем классе – Danield

omg, спасибо! отлично работает! thx для быстрого ответа! –

1) Прямоугольник имеет идентификатор - не класс, так что используйте #rect10023:hover

2) Вы будете должны удалить заливку прямоугольника от внутреннего стиля ИЛИ

вам нужно использовать fill: #0000FF!important; в вашем классе

источник

2014-12-01 10:24:03 Danield

Это потому, что у вас есть заливка прямоугольника, определенный с действующим стилем, и вы стилизация класса не идентификатором. Измените . на # и удалите это fill:#DF0101; и наведите указатель мыши.

источник

2014-12-01 10:14:59

Svg hover rect change color

ответ

Смежные вопросы