html - 使用 css 控制 svg 的大小和颜色

Question

我煞费苦心地创建了一个搜索图标并将其导出为 svg。这现在出现在网站的标题上，但我试图让 css 控制它的大小和颜色，这样我就可以响应地调整图标的大小，匹配网站上文本的颜色，并且还有某种翻转颜色变化或当用户滑过图标时变亮/变暗。我不想使用内联 svg，但我很乐意使用下面的 img-src 或对象技术。

<a href="#" onClick={this.onSearchClick} title="Search site">
<img src="//example-image-server/i/search_classic.svg" height="20" alt="Search the site"/>
<object type="image/svg+xml" data="//example-image-server/i/search_classic.svg" height="20" className="search-classic">Your browser does not support SVGs</object>
<span>Search</span>

在不使用 javascript 的情况下，如何控制颜色和大小。

我已经尝试创建一个 css 类“search-classic”并设置 fill: value 但它没有任何效果。

请注意这段代码是针对 React 的，所以使用 className="search-classic"而不是 class="search-classic"

Answer 1

我只会引用 2 次谷歌搜索的结果。提问前请自行研究。

Using SVG as an <object>

[…] You can link to an SVG file and retain the ability to affect its parts with CSS by using <object>. […] But, if you want the CSS stuff to work, you can't use an external stylesheet or <style> on the document, you need to use a <style> element inside the SVG file itself.

<svg ...>
  <style>
    /* SVG specific fancy CSS styling here */
  </style>
  ...
</svg>

[…] SVG has a way to declare an external stylesheet, which can be nice for authoring and caching and whatnot. This only works with <object> embedding of SVG files as far as I've tested. You'll need to put this in the SVG file above the opening <svg>

<?xml-stylesheet type="text/css" href="svg.css" ?>

来源:"Using SVG" — CSS-Tricks

附录1

我查看了您在评论中提供的 codepen 元素。让我们获取以下文件并修复它:

<svg xmlns="http://www.w3.org/2000/svg" width="136" height="136" viewBox="0 0 136 136">
  <style type="text/css" media="screen">
      <![CDATA[
      g {
          fill: yellow;
          stroke: black;
          stroke-width: 1;
          transition: fill 1s linear 0s;
      }
      g:hover {
          fill: blue;
      }
      ]]>
  </style>
  <path d="M121…Z"/>
</svg>

您正在尝试设置样式 g , 这是一个 SVG 组。一个组可以包含多个路径、圆圈、正方形等。不幸的是，您在这个 SVG 图标中没有任何组。你只有一个path .

此外，启用 :hover选择器，则必须启用 pointer-events在元素上。 This document should provide more information on that.

总而言之，这是一个工作示例:

<svg xmlns="http://www.w3.org/2000/svg" width="136" height="136" viewBox="0 0 136 136">
  <style type="text/css" media="screen">
      <![CDATA[
      path { /* TARGET THE CORRECT ELEMENT */
          fill: yellow;
          stroke: black;
          stroke-width: 1;
          transition: fill 1s linear 0s;
          pointer-events: all; /* ENABLE POINTER EVENTS */
      }
      path:hover { /* TARGET THE CORRECT ELEMENT */
          fill: blue;
      }
      ]]>
  </style>
  <path d="M121…Z"/>
</svg>