使用 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，但我很乐意使用 img-src 或下面的对象技术。我试过创建一个CSS 类“搜索经典”并设置填充：值，但它没有效果。

让我给你一个行动计划：

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

• 修改 SVG 文件图标

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

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

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

1. 用<symbol> 标签包裹你的svg 代码，并为其分配一个唯一标识符。

   1. 删除所有样式的 svg 元素，因为它们的优先级高于外部表格的样式CSS

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

• 将 SVG 文件添加到 HTML

假设您将编辑后的文件命名为sprite.svg
在您的情况下，添加到 HTML 只能通过标签 <object>
此命令在 HTML 中的位置应高于从精灵调用图标的命令。

<object type="image/svg+xml" data="sprite.svg">
   Your browser does not support SVG
</object>

• 从精灵中调用图标

<svg viewBox="0 0 24 24"> <use xlink:href="sprite.svg#searchIcon"></use> </svg>

• 为外部表添加强制继承规则CSS

一旦你使用了<use>命令，你的SVG就会落入shadow DOM，你需要添加下面的CSS

请参阅“使用 CSS all 属性设置内容样式”部分中的 the article by Sara Soueidan

path#myPath {
    fill: inherit;
    stroke: inherit;
    stroke-width: inherit;
    transform: inherit;
    /* ... */
}

疼痛是普遍存在的，经过实践检验

svg path {
    fill: inherit;
    stroke: inherit;
    stroke-width: inherit;
    transform: inherit;
    /* ... */
}    

计划中的所有项目都执行完后，图标会乖乖接受来自外部表CSS的样式。

Answer 2

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

使用 SVG 作为<object>

[...] 您可以使用<object> 链接到 SVG 文件并保留使用 CSS 影响其部分的能力。 [...] 但是，如果你想让 CSS 工作，你不能在文档上使用外部样式表或 <style>，你需要在 SVG 文件本身中使用 <style> 元素。

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

[…] SVG 有一种方法来声明一个外部样式表，这对于创作和缓存等非常有用。据我测试，这只适用于 <object> 嵌入 SVG 文件。您需要将其放在开头 <svg> 上方的 SVG 文件中

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

来源："Using SVG" — CSS-Tricks

附录 1

我查看了您在 cmets 中提供的 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>