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

问题的作者写道:

我不想使用内联svg，但我很乐意使用下面的imgsrc或对象技术。我尝试创建一个css类“searchclassic”并设置fill:value，但没有效果。

如果我理解正确，您希望从外部样式表中更改图标的样式。

>

修改SVG文件图标

1. 在SVG图标文件的第一行中添加将使用哪个样式表的指示：

这应该正好是第一行，否则可能会出现问题。

将 svg 代码包装为

  <?xml-stylesheet type="text/css" href="svg.css" ?>
<svg  version="1.1"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
	 width="48px" height="48px" viewBox="0 0 48 48">
<symbol id="searchIcon" viewBox="0 0 48 48">
	 <path id="myPath" d="M35,40H11v-0.051C5.947,39.447,2,35.186.... z"/>
</symbol> 
  	</svg>  

Answer 2

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

[…]您可以通过使用< code >链接到SVG文件，并保留使用CSS影响其部分的能力

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

[...]SVG有一种方法可以声明外部样式表，这对于创作和缓存等等都很好。这仅适用于

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

来源：“使用SVG”-CSS-Tricks

我查看了您在评论中提供的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图标中没有任何组。你只有一条路。

此外，要启用< code>:hover选择器，您必须在元素上启用< code>pointer-events。这份文件应该提供更多这方面的信息。

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

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