2015-04-07 10 views
0

Я пытаюсь создать меню гамбургера с помощью svg, но моя проблема в том, что мой svg является только заполнением, без инсульта.svg css анимация без штриха

Как я могу изменить размер каждой линии при наведении?

Вот SVG:

<svg id="menu" x="0px" y="0px" width="64.948px" height="30.172px" viewBox="0 0 64.948 30.172" style="enable-background:new 0 0 64.948 30.172;" xml:space="preserve"> 
 

 
    <style type="text/css"> 
 
    .st1{ 
 
     fill:#CE0011; 
 
\t transition:all .8s ease; 
 
    } 
 
    </style> 
 

 
    <path class="st1" id="line1" d="M64.948,2.73c-1.098,3.107-2.33,4.997-6.812,4.952c-16.91-0.17-33.824-0.068-50.942-0.068 c0.401-3.24,1.888-4.961,6.324-4.931C30.436,2.8,47.357,2.73,64.948,2.73z"/> 
 
    <path class="st1" id="line2" d="M60.676,12.856c-0.947,2.002-1.688,3.567-2.365,4.999c-18.135,0-36.122,0-54.159,0 c0.843-4.768,1.126-4.995,6.183-4.997c15.25-0.006,30.499-0.002,45.749-0.002C57.404,12.856,58.723,12.856,60.676,12.856z"/> 
 
    <path class="st1" id="line3" d="M56.599,23.023c-0.459,4.176-2.703,5.04-6.567,4.994C33.458,27.817,16.88,27.932,0,27.932 c0.348-2.549,0.455-4.888,3.908-4.894C21.379,23.006,38.849,23.023,56.599,23.023z"/> 
 

 
</svg>

+2

Вы можете сделать что-то вроде этого 'svg: hover .st1 {transform: scale (0.8)}' – anpsmn

+0

ok, но можно ли добавить a :: before и :: after fonction в каждую строку? например svg: hover # line1 :: before ??? – Tiaw

+0

SVG не поддерживает: после и: перед псевдоэлементами. – anpsmn

ответ

0

Как сказал aspsmn, попробуйте ...

svg:hover .st1 { 
    transform: scale(0.8); 
} 

Я построил скрипку (http://jsfiddle.net/rfornal/pv0np9pw/), чтобы проверить это и на самом деле пытался с масштабом до 1,2 ... это стало проблемой, так как я не изменил размер окна просмотра.

Однако это подтвердило рабочую концепцию.

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