CODEWITHSUNDEEP
csssvg
user3814670
user3814670

Reputation: 61

how can I put emboss style on SVG element on hover using css

here's my css style

<style>
#asia > path:hover {
   fill: red;
  }
</style>

and heres the SVG element:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="800px" height="500px" viewBox="0 0 800 500" enable-background="new 0 0 800 500" xml:space="preserve">
<g transform="translate(0,239) scale(0.016963,-0.016963)"  id="asia">
    <path fill="" d="M39736.762-6721.546c-23.949-35.866-47.898-97.409-51.293-136.729
        c-5.125-37.651-17.098-85.492-27.348-104.317c-10.246-20.495-17.098-66.667-13.699-102.533c3.453-59.815,8.578-68.393,53.02-76.914
        c52.965-10.248,165.805,32.47,165.805,61.542c0,11.975,8.578,11.975,22.219,0c17.102-13.702,34.199-6.851,68.395,30.742
        c25.617,25.677,46.113,59.815,46.113,75.245c0,15.371,13.703,27.346,32.527,27.346c20.496,0,39.32,15.371,46.113,39.32
        c6.852,20.495,29.074,64.939,51.297,99.136c53.02,83.765,30.801,102.533-83.766,70.063c-150.43-40.99-155.555-40.99-191.422-8.521
        c-18.824,18.768-41.047,35.866-51.293,40.99c-8.578,3.454-15.371,17.098-11.977,29.073
        C39799.977-6641.178,39784.605-6654.88,39736.762-6721.546z"/>        
</g>
</svg>

I want to add bevel and emboss style when I hover the path tag. I already read related topics and it seems that css emboss is not working on svg element. Any comments or suggestions appreciated.

Upvotes: 0

Views: 1159

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101918

Use an SVG filter to achieve your emboss effect and apply it on hover.

<svg width="7.5cm" height="5cm" viewBox="0 0 200 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="MyFilter" ...>
      [...snip...]
    </filter>
  </defs>

  <path fill="#D90000" class="button"
        d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />

</svg>

CSS:

.button:hover {
    filter: url(#MyFilter);
}

Demo here

Note that SVG filters will not work on versions of IE <10.

Upvotes: 1

Related Questions