SVG Hover Effect

Resolved sambullen80
(@sambullen80)

9 years, 5 months ago

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 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” 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/” 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
(@benbodhi)

9 years, 5 months ago

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
(@sambullen80)

9 years, 5 months ago

Hi, thanks for your quick response.

I thought by adding the class

style-svg or

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
(@benbodhi)

9 years, 5 months ago

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.