Question

这是我的CSS风格

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

并且继承了SVG元素：

<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>

当我悬停路径标记时，我想添加斜角和浮雕样式。我已经阅读了相关的主题，似乎css emboss不适用于svg元素。任何意见或建议表示赞赏。

Answer 1

使用SVG滤镜实现浮雕效果并将其应用于悬停。

<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

请注意，SVG过滤器不适用于IE＆lt; 10。

的版本

如何使用css在悬停时在SVG元素上放置浮雕样式

1 个答案: