问题描述
http://codepen.io/leongaban/pen/EChLK
这里有一个独特的问题,当将我的SVG用作背景图片.就我而言,在单击时将类myGreen交换为myGray.
So unique problem here, not sure how to target and change the fill color of my SVG when it's used as a background image. In my case here swapping the class myGreen to myGray on click.
html
<div id="icon_phone">Phone</div>
CSS
#icon_phone {
padding-left: 15px;
height: 30px;
font-family: Arial;
background: url('http://leongaban.com/_codepen/svg/ico_my_phone.svg') no-repeat;
background-size:10px 20px;
cursor: pointer;
}
当前jQuery
$("#icon_phone").unbind('click').bind('click', function () {
//$(this).css('background', 'none');
});
Illustrator创建的SVG代码
The SVG code created by Illustrator
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.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="15px" height="28px" viewBox="0 0 15 28" enable-background="new 0 0 15 28" xml:space="preserve">
<style type="text/css" >
<![CDATA[
path.myGreen {
fill: #39B54A;
}
path.myGray {
fill: #e2e2e2;
}
]]>
</style>
<path class="myGreen" d="M12.861,0H2.144C0.965,0,0,1.03,0,2.287v22.556c0,1.259,0.965,2.287,2.144,2.287h10.717
c1.179,0,2.144-1.029,2.144-2.287V2.287C15.005,1.03,14.04,0,12.861,0z M5.721,2.137h3.572c0.236,0,0.305,0.537,0.305,0.79
c0,0.253-0.069,0.639-0.305,0.639H5.721c-0.236,0-0.206-0.386-0.206-0.639C5.515,2.675,5.485,2.137,5.721,2.137z M7.52,26.16
c-0.711,0-1.287-0.614-1.287-1.373c0-0.758,0.576-1.373,1.287-1.373c0.711,0,1.287,0.615,1.287,1.373
C8.808,25.546,8.231,26.16,7.52,26.16z M13.578,22.139H1.434V4.995h12.144V22.139z"/>
我在这里找到了如何将类添加到svg文件中: http://tutorials.jenkov.com/svg/svg-and-css.html
I found out how to add classes into the svg file here:http://tutorials.jenkov.com/svg/svg-and-css.html
推荐答案
创建灰色背景图像文件,然后单击onclick更改背景URL以指向备用图像.
Create a grey background image file and onclick change the background URL to point to the alternate image.
无法通过以下方式操纵图像主机文档.将SVG用作图像时,就像可伸缩的位图一样.
这篇关于SVG用作背景图像时,如何更改其单击时的填充颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!