Question

我煞费苦心地创建了一个搜索图标并将其导出为svg。这现在出现在网站的标题上，但我试图控制它的大小和颜色，所以我可以响应地调整图标大小，匹配网站上的文字颜色，还有一些翻转颜色变化当用户翻转图标时，或者变亮/变暗。我不想使用内联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次谷歌搜索的结果。在提问之前请自己做研究。

将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

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

Answer 2

该问题的作者写道：

我不想使用内联svg，但我很乐意使用 img-src或下面的对象技术。我试过创建一个CSS class＆＃34; search-classic＆＃34;并设置填充：值，但它没有任何效果。

让我为你提供行动计划：

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

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

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

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

使用<symbol>标记包装svg代码并为其指定唯一标识符。
1. 删除所有样式的svg元素，因为它们的优先级高于外部表的样式CSS

＆＃13;

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

＆＃13;

将SVG文件添加到HTML

假设您为编辑后的文件指定了名称sprite.svg
在您的情况下，只能通过标记<object>来添加到HTML 此命令应位于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属于影子DOM，您需要添加以下CSS

请参阅第34页的the article by Sara Soueidan部分;使用CSS all Property＆＃34;

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

疼痛是普遍的，在实践中进行了测试

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

在执行了计划中的所有项目后，该图标将乖乖地接受来自外部表CSS的样式。

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

2 个答案:

将SVG用作`<object>`

附录1

让我为你提供行动计划：

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

2 个答案:

将SVG用作<object>

附录1

让我为你提供行动计划：

将SVG用作`<object>`