在 SVG 文件或标签中添加悬停样式

Question

我有一个 SVG 标签，我想在它悬停时更改填充颜色。我在 SVG 标签中添加了一个样式标签，但似乎悬停不起作用而简单的样式 工作得很好。这是我的 SVG 标签：

<svg width="28" height="81" viewBox="0 0 28 81" xmlns="http://www.w3.org/2000/svg">
    <style type="text/css">
        .slick_next_arrow {
            fill:red;
         }
        .slick_next_arrow:hover {
            fill:green;
         }
     </style>
     <path class="slick_next_arrow" hover="fill:green" fill-rule="evenodd" clip-rule="evenodd" d="M3.73141 1.20959C2.95311 -0.00927037 1.3341 -0.366415 0.115239 0.411883L25.5894 40.3058L0 80.3802C1.21886 81.1585 2.83787 80.8014 3.61617 79.5825L27.4729 42.2216C27.7642 41.7653 27.8965 41.2531 27.884 40.7498C28.1017 40.0409 28.0185 39.2445 27.5881 38.5705L3.73141 1.20959Z"/>
</svg>

我已通过以下两种方式将此 svg 包含到element::after中：

1. 在内容中添加整个标签

   #slick-views-customer-quotes-carousel-block-main-1 .slick__arrow .slick-next::after {
      content : url('data:image/svg+xml; utf8, <svg class="" width="28" height="81" viewBox="0 0 28 81" xmlns="http://www.w3.org/2000/svg">  <style type="text/css">  .slick_next_arrow {      fill:blue;  }  .slick_next_arrow:hover {      fill:green;  }  </style>  <path class="slick_next_arrow" hover="fill:green" fill-rule="evenodd" clip-rule="evenodd" d="M3.73141 1.20959C2.95311 -0.00927037 1.3341 -0.366415 0.115239 0.411883L25.5894 40.3058L0 80.3802C1.21886 81.1585 2.83787 80.8014 3.61617 79.5825L27.4729 42.2216C27.7642 41.7653 27.8965 41.2531 27.884 40.7498C28.1017 40.0409 28.0185 39.2445 27.5881 38.5705L3.73141 1.20959Z"/></svg>');
   

   }

2. 作为单独的 SVG 文件

   #slick-views-customer-quotes-carousel-block-main-1 .slick__arrow .slick-next::after {
      content : url("../images/right_arrow.svg");
   }
   

但它们都不起作用。关于如何解决这个问题的任何想法？

Answer 1

当你将其设置为伪元素的内容时，你的 svg 实际上是一个CSS <image>。表示 svg 文档的 CSS <image> 与表示 svg 的 html <img>具有相同的限制：

• 不会获取任何外部资源
• 脚本不会在内部文档中运行
• 内部文档不会是交互式的（即没有指针事件）
• ...

这意味着:hover这个 svg 文档中的任何样式都将毫无用处。

:hover但是，您可以做的是在父元素上设置它.slick-next并更改content那里。

为了避免在服务器上存储两个 svg 文件，而只有那些fill会改变的文件，您可以使用Lea Verou演示的 hack ，它利用了:target伪类。有关此的更多信息，请参见此处。

您必须重组您的 svg，以便拥有具有[id]属性的不可见触发元素，这样它们就可以变成:target. 然后所有逻辑都是使用 CSS 选择器完成的：

右箭头.svg

<svg width="28" height="81" viewBox="0 0 28 81" xmlns="http://www.w3.org/2000/svg">
  <style>
    .slick_next_arrow {
      fill:red;
    }
    /* when loaded from 'right_arrow.svg#hover' */
    #hover:target ~ .slick_next_arrow {
      fill:green;
    }
  </style>
  <!-- here is our triggerer -->
  <g id="hover"></g>
  <!-- the visual content -->
  <path class="slick_next_arrow" hover="fill:green" fill-rule="evenodd" clip-rule="evenodd" d="M3.73141 1.20959C2.95311 -0.00927037 1.3341 -0.366415 0.115239 0.411883L25.5894 40.3058L0 80.3802C1.21886 81.1585 2.83787 80.8014 3.61617 79.5825L27.4729 42.2216C27.7642 41.7653 27.8965 41.2531 27.884 40.7498C28.1017 40.0409 28.0185 39.2445 27.5881 38.5705L3.73141 1.20959Z"/>
</svg>

还有你的CSS：

.slick__arrow .slick-next::after {
  content : url('right_arrow.svg');
}
.slick__arrow .slick-next:hover::after {
  content : url('right_arrow.svg#hover');
}

这是一个更复杂的实时片段，因为我们必须解决无法托管来自 StackSnippets 的第三方文件的事实。

<svg width="28" height="81" viewBox="0 0 28 81" xmlns="http://www.w3.org/2000/svg">
  <style>
    .slick_next_arrow {
      fill:red;
    }
    /* when loaded from 'right_arrow.svg#hover' */
    #hover:target ~ .slick_next_arrow {
      fill:green;
    }
  </style>
  <!-- here is our triggerer -->
  <g id="hover"></g>
  <!-- the visual content -->
  <path class="slick_next_arrow" hover="fill:green" fill-rule="evenodd" clip-rule="evenodd" d="M3.73141 1.20959C2.95311 -0.00927037 1.3341 -0.366415 0.115239 0.411883L25.5894 40.3058L0 80.3802C1.21886 81.1585 2.83787 80.8014 3.61617 79.5825L27.4729 42.2216C27.7642 41.7653 27.8965 41.2531 27.884 40.7498C28.1017 40.0409 28.0185 39.2445 27.5881 38.5705L3.73141 1.20959Z"/>
</svg>

.slick__arrow .slick-next::after {
  content : url('right_arrow.svg');
}
.slick__arrow .slick-next:hover::after {
  content : url('right_arrow.svg#hover');
}

const svg_content = `<svg width="28" height="81" viewBox="0 0 28 81" xmlns="http://www.w3.org/2000/svg">
  <style>
    .slick_next_arrow {
      fill:red;
    }
    #hover:target ~ .slick_next_arrow {
      fill:green;
    }
/* some goodies */
    circle {
      display: none;
    }
    /* hide previous path */
    [id^="show_circle"]:target ~ .slick_next_arrow {
      display: none;
    }
    /* show new one */
    [id^="show_circle"]:target ~ circle {
      display: block; 
      fill: red;
    }
    #show_circle_hover:target ~ circle.change-color {
      fill: green;
    }
  </style>
  <!-- here are all our triggerers -->
  <g id="hover"></g>
  <g id="show_circle"></g>
  <g id="show_circle_hover"></g>
  <path class="slick_next_arrow" hover="fill:green" fill-rule="evenodd" clip-rule="evenodd" d="M3.73141 1.20959C2.95311 -0.00927037 1.3341 -0.366415 0.115239 0.411883L25.5894 40.3058L0 80.3802C1.21886 81.1585 2.83787 80.8014 3.61617 79.5825L27.4729 42.2216C27.7642 41.7653 27.8965 41.2531 27.884 40.7498C28.1017 40.0409 28.0185 39.2445 27.5881 38.5705L3.73141 1.20959Z"/>
  <circle cx="14" cy="15" r="12"/>
  <circle cx="14" cy="40" r="12" class="change-color"/>
  <circle cx="14" cy="65" r="12"/>
</svg>`;

// StackSnippets force us to make a complex js-powered live demo...
// but in production all is done from CSS
const url = URL.createObjectURL( new Blob( [ svg_content ], { type: "image/svg+xml" } ) );

const el = document.querySelector( '.parent' );
el.style.setProperty( '--url', 'url(' + url + ')' );
el.style.setProperty( '--url-hovered', 'url(' + url + '#hover)' );
el.style.setProperty( '--url-circle', 'url(' + url + '#show_circle)' );
el.style.setProperty( '--url-circle-hovered', 'url(' + url + '#show_circle_hover)' );

但您可以在此 plnkr 中访问简单版本。