css - svg图标 - svg图片




改变svg颜色 (6)

我想使用这种技术http://css-tricks.com/svg-fallbacks/并更改svg颜色,但到目前为止我还没有能够这样做。 我把它放在css中,但不管是什么,我的形象总是黑的。 我的代码:

<svg>
<image class="change-my-color" xlink:href="https://dl.dropboxusercontent.com/u/13823768/tumblr/iconmonstr-time-3-icon.svg" width="96" height="96" src="ppngfallback.png" />
</svg>

和css

.change-my-color {
    fill: green;
}

在jsfiddle: http://jsfiddle.net/Kk93M/http://jsfiddle.net/Kk93M/


只有带路径信息的SVG 。 你不能对图像这样做..因为你可以改变strock和填充信息的路径,你就完成了。 喜欢Illustrator

所以:通过CSS你可以覆盖路径fill

path { fill: orange; }

但如果您想要更灵活的方式,因为您想要在发生悬停效果时使用文本进行更改..使用

path { fill: currentcolor; }

body {
  background: #ddd;
  text-align: center;
  padding-top: 2em;
}

.parent {
  width: 320px;
  height: 50px;
  display: block;
  transition: all 0.3s;
  cursor: pointer;
  padding: 12px;
  box-sizing: border-box;
}

/***  desired colors for children  ***/
.parent{
  color: #000;
  background: #def;
}
.parent:hover{
  color: #fff;
  background: #85c1fc;
}

.parent span{
  font-size: 18px;
  margin-right: 8px;
  font-weight: bold;
  font-family: 'Helvetica';
  line-height: 26px;
  vertical-align: top;
}
.parent svg{
  max-height: 26px;
  width: auto;
  display: inline;
}

/****  magic trick  *****/
.parent svg path{
  fill: currentcolor;
}
<div class='parent'>
  <span>TEXT WITH SVG</span>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128" viewBox="0 0 32 32">
<path d="M30.148 5.588c-2.934-3.42-7.288-5.588-12.148-5.588-8.837 0-16 7.163-16 16s7.163 16 16 16c4.86 0 9.213-2.167 12.148-5.588l-10.148-10.412 10.148-10.412zM22 3.769c1.232 0 2.231 0.999 2.231 2.231s-0.999 2.231-2.231 2.231-2.231-0.999-2.231-2.231c0-1.232 0.999-2.231 2.231-2.231z"></path>
</svg>
</div>


如果你想对内联svg执行此操作,例如,css中的背景图像:

background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(31,159,215,1)' viewBox='...'/%3E%3C/svg%3E");

当然,用你的内嵌图像代码替换....


您不能以这种方式更改图像的颜色。 如果将SVG作为图像加载,则无法在浏览器中更改使用CSS或Javascript显示的方式。

如果要更改SVG图像,则必须使用<object><iframe>或使用<svg> inline加载它。

如果要使用页面中的技术,则需要Modernizr库,您可以在其中检查SVG支持并有条件地显示或不是后备图像。 然后,您可以内联SVG并应用所需的样式。

http://jsfiddle.net/helderdarocha/6uRgS/

您可以内联SVG,使用类名( my-svg-alternate )标记您的后备图像:

<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path id="time-3-icon" .../>
</svg>

<image class="my-svg-alternate" width="96" height="96" src="ppngfallback.png" />

在CSS中使用Modernizr的no-svg类(CDN: http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.jshttp://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js )来检查SVG支持。 如果没有SVG支持,将忽略SVG块并显示图像,否则图像将从DOM树中删除( display: none ):

.my-svg-alternate {
  display: none;
}
.no-svg .my-svg-alternate {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url(image.png);
}

然后,您可以更改内联元素的颜色:

#time-3-icon {
   fill: green;
}

最简单的方法是使用https://icomoon.io/app/#/select等服务从SVG创建字体。 上传你的SVG,点击“生成字体”,包括字体文件和css到你身边,只需使用和任何其他文本样式。 我总是这样使用它,因为它使造型更容易。

编辑:正如article提到的@ CodeMouse92图标字体搞砸了屏幕阅读器(并且可能对SEO不利)。 所以要坚持使用SVG。


要更改任何SVG的颜色,您可以通过在任何文本编辑器中打开svg文件来直接更改svg代码。 代码可能类似于下面的代码

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <g>
        <path d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
            C181.113,454.921,171.371,464.663,161.629,474.404z"/>
    /*Some more code goes on*/
    </g>
    </svg>

您可以观察到有一些XML标签,如路径,圆形,多边形等 。 你可以在style属性的帮助下添加自己的颜色。 请看下面的例子

<path style="fill:#AB7C94;" d="M114.26,436.584L99.023,483h301.953l-15.237-46.416H114.26z M161.629,474.404h-49.592l9.594-29.225h69.223
                C181.113,454.921,171.371,464.663,161.629,474.404z"/>

将style属性添加到所有标记,以便您可以获得所需颜色的SVG


要简单地更改svg的颜色:

转到svg文件并在样式下,提到填充颜色。

<style>.cls-1{fill:#FFFFFF;}</style>




svg