Точная SVG наведения в CSS и HTML

У меня есть geometic формы, я хотел бы, чтобы заполнить, изображенныеТочная SVG наведения в CSS и HTML

enter image description here

Когда мышь завис над каждой областью, я хотел бы его заполнить, на фото здесь.

enter image description here

К сожалению, когда я добавляю в остальных формах, мой код не работает, так как мой браузер дает каждой форме габаритного прямоугольник, который охватывает остальную часть формы. Как я могу сделать форму подсказки для моего svg точной, а не коробкой?

Вот мой HTML код:

<object data="images/logo/middle.svg" 
type="image/svg+xml" class="middlesvg hoversvg" > <!-- only the middle is shown for brevity --> 
</object>

CSS

.hoversvg 
{ 
    opacity: 0; 
} 

.hoversvg:hover{ 
    opacity: 1; 
}

источник

2013-07-15 Alexander Lozada

Вы должны были бы реализовать зависание в файле middle.svg. Таким образом вы можете настроить таргетинг на определенную фигуру, которую вы хотите изменить при наведении.

источник

2013-07-15 18:38:52

Я не особо уверен, что вы имеете в виду; не могли бы вы объяснить? Нужно ли мне указывать конкретную фигуру в моем редакторе, а затем вызывать это имя в CSS? –

Показать middle.svg, и я могу прокомментировать его. –

Вы можете сделать это прямо в SVG, не требуется CSS.

Нарисуйте каждый сегмент в качестве своего собственного многоугольника или пути, и добавить набор ATTRIBUTENAME тег в него:

<path … id="path1"><set attributeName="opacity" from="0" to="1.0" begin="path1.mouseover" end="path1.mouseout"/></path> 
<path … id="path1"><set attributeName="opacity" from="0" to="1.0" begin="path2.mouseover" end="path2.mouseout"/></path>

т.д.

Эта страница имеет немного более подробно http://www.ibm.com/developerworks/library/x-svgint/ (прокрутите вниз до событий)

источник

2013-07-16 03:04:07

Точная SVG наведения в CSS и HTML

ответ

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