Title: SVG Hover Effect
Last modified: December 7, 2016

---

# SVG Hover Effect

 *  Resolved [sambullen80](https://wordpress.org/support/users/sambullen80/)
 * (@sambullen80)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/svg-hover-effect/)
 * Hi, I was having trouble centre aligning my SVG, so tried your plugin which worked
   great, thanks.
 * Now i am a little confused about styling with CSS. Could you please help explain
   how i would achieve a hover over effect?
 * Do i assign style-svg or ⌊alt-text⌉ to the class?
 * On another site i achieved the hover effect by using this CSS and added an id”
   phone” and <g class=”hover_group”> to the html. Now using your plugin, i don’t
   see how i can add the id or class through HTML because I’m uploading the SVG 
   via a single image block instead of raw HTML.
 * My CSS before was,
    #phone { transition: 0.5s; } g:hover #phone { fill: #FA5754;}
 * My plain HTML for the SVG is,
    <svg xmlns=”[http://www.w3.org/2000/svg&#8221](http://www.w3.org/2000/svg&#8221);
   width=”176″ height=”198″ viewBox=”0 0 176.2 197.9″><style>.a{fill:#FFF;}</style
   ><switch><foreignObject requiredExtensions=”[http://ns.adobe.com/AdobeIllustrator/10.0/&#8221](http://ns.adobe.com/AdobeIllustrator/10.0/&#8221);
   width=”1″ height=”1″/><g><g><path d=”M93.8 191.3c-3.1 1.8-8.3 1.8-11.4 0l-71.3-
   41.2c-3.1-1.8-5.7-6.3-5.7-9.9V57.8c0-3.6 2.6-8.1 5.7-9.9l71.4-41.2c3.1-1.8 8.3-
   1.8 11.4 0l71.3 41.2c3.1 1.8 5.7 6.3 5.7 9.9v82.4c0 3.6-2.6 8.1-5.7 9.9L93.8 
   191.3z” fill=”#35A7DF”/><path d=”M88.1 196.6c-2.9 0-5.6-0.7-7.7-1.9l-71.3-41.2c-
   4.4-2.5-7.7-8.3-7.7-13.4V57.8c0-5.1 3.3-10.8 7.7-13.4l71.4-41.2c2.1-1.2 4.9-1.9
   7.7-1.9 2.9 0 5.6 0.7 7.7 1.9l71.3 41.2c4.4 2.5 7.7 8.3 7.7 13.4v82.4c0 5.1-3.3
   10.8-7.7 13.4l-71.3 41.2C93.7 195.9 91 196.6 88.1 196.6z” style=”fill:none;stroke-
   width:3;stroke:#F6921E”/></g><g><rect x=”48.7″ y=”107.1″ width=”9.2″ height=”
   9.2″ class=”a”/><rect x=”48.7″ y=”121.8″ width=”9.2″ height=”9.2″ class=”a”/>
   <rect x=”65.3″ y=”92.4″ width=”9.2″ height=”9.2″ class=”a”/><rect x=”65.3″ y=”
   107.1″ width=”9.2″ height=”9.2″ class=”a”/><rect x=”65.3″ y=”121.8″ width=”9.2″
   height=”9.2″ class=”a”/><rect x=”81.9″ y=”92.4″ width=”9.2″ height=”9.2″ class
   =”a”/><rect x=”81.9″ y=”107.1″ width=”9.2″ height=”9.2″ class=”a”/><rect x=”98.6″
   y=”92.4″ width=”9.2″ height=”9.2″ class=”a”/><path d=”M55.9 45.4c-1.1 0-2 0.9-
   2 2v17.2c0 1.1 0.9 2 2 2s2-0.9 2-2v-17.2C57.9 46.3 57 45.4 55.9 45.4z” class=”
   a”/><path d=”M118.2 51.5h-9.5v13.1c0 3.9-3.2 7.1-7.1 7.1s-7.1-3.2-7.1-7.1V51.5H63v13.1c0
   3.9-3.2 7.1-7.1 7.1 -3.9 0-7.1-3.2-7.1-7.1V51.5h-9.5c-2.8 0-5 2.2-5 5v21.4h88.8V56.5C123.2
   53.8 120.9 51.5 118.2 51.5z” class=”a”/><path d=”M101.6 45.4c-1.1 0-2 0.9-2 2v17.2c0
   1.1 0.9 2 2 2s2-0.9 2-2v-17.2C103.6 46.3 102.7 45.4 101.6 45.4z” class=”a”/><
   path d=”M89 144.5H42.7c0.4 2.4 2.4 4.2 4.9 4.2h43.1C90.1 147.3 89.5 145.9 89 
   144.5z” class=”a”/><path d=”M131.5 97.5v-4.8 -2.1 -4.4 -0.9 -20.5c0-2.5-1.8-4.5-
   4.2-4.9v22.1 3.3 0.9 4.4 2.1 4.1C128.7 96.9 130.1 97.1 131.5 97.5z” class=”a”/
   ><path d=”M87.2 135.8H39.3c-0.2 0-0.4-0.2-0.4-0.4V86.8h79.7v9.9c1.5-0.2 3-0.3
   4.6-0.3V82.3H34.3v53.1c0 2.8 2.2 5 5 5h48.5C87.5 138.9 87.3 137.3 87.2 135.8z”
   class=”a”/><path d=”M88.7 121.8h-6.8v9.2h5.1C87.2 127.8 87.8 124.7 88.7 121.8z”
   class=”a”/><path d=”M123.2 162.8c-16.7 0-30.2-13.6-30.2-30.2 0-16.7 13.6-30.2
   30.2-30.2s30.2 13.6 30.2 30.2C153.4 149.3 139.8 162.8 123.2 162.8zM123.2 108.6c-
   13.2 0-24 10.8-24 24 0 13.3 10.8 24 24 24 13.3 0 24-10.8 24-24C147.2 119.4 136.4
   108.6 123.2 108.6z” class=”a”/><polygon points=”131.9 130.3 122.9 131.6 123.2
   132.6 123.5 133.7 ” class=”a”/><polygon points=”112.4 143.4 122.4 131.9 123.2
   132.6 124 133.4 ” class=”a”/><polygon points=”110 119.2 109.8 119.5 125.9 135.7
   126.2 135.4 ” class=”a”/><path d=”M124.3 132.6c0 0.6-0.5 1.1-1.1 1.1s-1.1-0.5-
   1.1-1.1c0-0.6 0.5-1.1 1.1-1.1S124.3 132 124.3 132.6z” class=”a”/><rect x=”122.8″
   y=”111.3″ width=”0.8″ height=”4.9″ class=”a”/><polygon points=”114.5 116.8 113.8
   117.2 112.2 114.4 112.9 114 ” class=”a”/><rect x=”105.8″ y=”121.2″ transform=”
   matrix(0.4977 -0.8673 0.8673 0.4977 -53.1868 153.7426)” width=”0.8″ height=”3.3″
   class=”a”/><rect x=”105.8″ y=”140.8″ transform=”matrix(-0.4977 -0.8673 0.8673-
   0.4977 35.4238 305.4406)” width=”0.8″ height=”3.3″ class=”a”/><rect x=”112.9″
   y=”148″ transform=”matrix(-0.8664 -0.4993 0.4993 -0.8664 136.8282 335.9288)” 
   width=”0.8″ height=”3.3″ class=”a”/><rect x=”132.6″ y=”148″ transform=”matrix(-
   0.8652 0.5014 -0.5014 -0.8652 323.1517 212.452)” width=”0.8″ height=”3.3″ class
   =”a”/><rect x=”139.8″ y=”140.8″ transform=”matrix(-0.5014 0.8652 -0.8652 -0.5014
   333.7837 92.5825)” width=”0.8″ height=”3.3″ class=”a”/><rect x=”139.8″ y=”121.2″
   transform=”matrix(0.5014 0.8652 -0.8652 0.5014 176.1523 -60.0942)” width=”0.8″
   height=”3.3″ class=”a”/><rect x=”132.6″ y=”114″ transform=”matrix(0.8673 0.4977-
   0.4977 0.8673 75.1831 -50.8717)” width=”0.8″ height=”3.3″ class=”a”/><rect x=”
   101.9″ y=”132.2″ width=”4.9″ height=”0.8″ class=”a”/><rect x=”122.8″ y=”149″ 
   width=”0.8″ height=”4.9″ class=”a”/><rect x=”139.5″ y=”132.2″ width=”4.9″ height
   =”0.8″ class=”a”/></g></g></switch></svg>
 * Could you please explain what is the CSS or how i target the SVG in CSS after
   using your plugin?
    Thank you very much, really appreciate if you could help.

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * (@benbodhi)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/svg-hover-effect/#post-8523114)
 * Hi,
 * You can assign classes or ID’s to the elements within the SVG by opening it in
   a text/code editor like sublime text and manually typing them in to the SVG file(
   SVG files are actually just plain XML code).
 * The only other way to do it is to target the elements themselves but you have
   much less control.
 * I hope this helps.
 *  Thread Starter [sambullen80](https://wordpress.org/support/users/sambullen80/)
 * (@sambullen80)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/svg-hover-effect/#post-8523169)
 * Hi, thanks for your quick response.
 * I thought by adding the class
 * style-svg or
 * ![alt-text](image-source.svg)
 * with your plugin, it allowed you to target the SVG in CSS? 1 thing, I’m confused
   which of those to enter into the class field? If that is correct and I’m not 
   talking complete nonsense, lol, should i be able to achieve it with this CSS?
 * style-svg { transition: 0.5s; }
    :hover #style-svg { fill: #FA5754; }
 * Although i tried it and doesnt work, where am i going wrong?
 *  Plugin Author [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * (@benbodhi)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/svg-hover-effect/#post-8523181)
 * Hey, no problem.
 * You use the class “style-svg” in your img tag to swap the img with your SVG code
   and render it inline.
    I imagine then you would want to target elements within
   the SVG? To target elements within your SVG, you will need to open it in a text
   editor and add classes to target to the elements within the SVG file itself.
 * If you want to just target the SVG as a whole, it will have a unique ID after
   it is rendered inline, you can see it using the browser inspector. It will be
   something like “svg-replaced-0”.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘SVG Hover Effect’ is closed to new replies.

 * ![](https://ps.w.org/svg-support/assets/icon.svg?rev=3554681)
 * [SVG Support](https://wordpress.org/plugins/svg-support/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/svg-support/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/svg-support/)
 * [Active Topics](https://wordpress.org/support/plugin/svg-support/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/svg-support/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/svg-support/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [Benbodhi](https://wordpress.org/support/users/benbodhi/)
 * Last activity: [9 years, 6 months ago](https://wordpress.org/support/topic/svg-hover-effect/#post-8523181)
 * Status: resolved